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”.
I’m planning to write a series of short articles about Android’s Jetpack Compose UI framework. You can use it to test your understanding or maybe learn a few things along the way.
Situation 1 Take a look at the Composable below, what will happen if the button is clicked?
@Composable fun Situation1() { var name = "Guowei" Column { Text(name) Button(onClick = { name = "Hello" }) { Text("Change name!") } } } Answer Nothing.
