Jetpack Compose
In previous post we talked about the companion object Modifier and how it’s implementing the interface Modifier. Now it is time to go deeper and see Modifier’s internals.
Situation 1 What is Modifier after all?
Answer Well, what if I tell you Modifier is just a binary tree data structure.
Let’s dive into the source code to prove this.
First let’s take a look at the class hierachy, we have 3 pieces: Modifier(interface), Element and CombinedModifier.
Let’s talk about Modifier.
Situation 1 What is the simplest Modifier?
Answer Modifier What is it? a class? an object?
It is a companion object, which implements the Modifier interface.
companion object : Modifier { override fun <R> foldIn(initial: R, operation: (R, Element) -> R): R = initial override fun <R> foldOut(initial: R, operation: (Element, R) -> R): R = initial override fun any(predicate: (Element) -> Boolean): Boolean = false override fun all(predicate: (Element) -> Boolean): Boolean = true override infix fun then(other: Modifier): Modifier = other override fun toString() = "Modifier" } The formal version is Modifier.
This time we are focusing on derivedStateOf and how it is different from remember.
Let’s look at this simple example:
Situation 1 What will happen when user clicks on the Text?
@Composable private fun Situation1() { var name by remember { mutableStateOf("guowei") } val uppercase by remember { derivedStateOf { name.uppercase() } } Text(uppercase, modifier = Modifier.clickable { name = "hello" }) } Answer The text will change from “GUOWEI” to “HELLO”.
Let’s do a bit of recap first. (I highly suggest you go through previous post if not already done so)
Situation 1 Will clicking the button trigger the recompose of UserPage?
data class User(var name: String) class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val user1 = User("Guowei Lv") val user2 = User("Guowei Lv") var user = user1 setContent { var flag by remember { mutableStateOf(true) } Column { Text(text = "Flag is $flag") UserPage(user = user) Button(onClick = { flag = !
Situation 1 Take a look at the Composable below, what will happen if the button is clicked?
@Composable fun Situation1() { val names by remember { mutableStateOf(mutableListOf("Bob", "Tom")) } Column { names.forEach { Text(it) } Button(onClick = { names.add("Jane") }) { Text("Add Jane!") } } } Answer The list will still consist of Bob and Tom. Jane will not be added. The reason is that for mutable states, only the assignment operation is “observed”.
