Compose - Recomposició

L'única manera de modificar una Composició és mitjançant la recomposició.

• Introducció
• State
• Activitats
• Pendent

Introducció

Quan Compose executa els teus componibles per primera vegada, durant la composició inicial, farà un seguiment dels componibles que cridem per descriure la teva UI en una Composició.

Després, quan l’estat de la teva aplicació canvia, Compose programa una recomposició.

La recomposició és quan Compose torna a executar els componibles que poden haver canviat en resposta als canvis d’estat, i després actualitza la Composició per reflectir qualsevol canvi.

Nota

Una Composició només pot ser produïda per una composició inicial i actualitzada per recomposició. L’única manera de modificar una Composició és mitjançant la recomposició.

State

La recomposició normalment és provocada per un canvi en un objecte State<T>.

Compose fa un seguiment d’aquests i executa tots els componilbes de la Composició que llegeixen aquest State<T> en particular, i qualsevol composable que cridin que no es pugui ometre.

En aquest exemple, cada vegada que es fa clic al botó, es modifica la variable d’estat count i s’executa una recomposició.

@Composable
fun Counter() {

    var count by remember { mutableStateOf(0) }

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {
        Text(text = "Count: $count", fontSize = 24.sp)

        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

Les funcions componilbes poden utilitzar l’API remember per emmagatzemar un objecte en memòria. Un valor calculat per remember s’emmagatzema a la Composició durant la composició inicial, i el valor emmagatzemat es retorna durant la recomposició. remember es pot utilitzar per emmagatzemar tant objectes mutables com immutables.

mutableStateOf crea un MutableState<T> observable, que és un tipus observable integrat amb el runtime de Compose.

interface MutableState<T> : State<T> {
    override var value: T
}

Qualsevol canvi a value programa la recomposició de qualsevol funció composable que llegeixi value.

Any changes to value schedules recomposition of any composable functions that read value.

Hi ha tres maneres de declarar un objecte MutableState en un composable:

val mutableState = remember { mutableStateOf(default) }
var value by remember { mutableStateOf(default) }
val (value, setValue) = remember { mutableStateOf(default) }

Aquestes declaracions són equivalents i es proporcionen com a sintaxi abreujada per a diferents usos de l’estat. Hauries de triar la que produeixi el codi més fàcil de llegir en el composable que estàs escrivint.

La sintaxi de delegació by requereix les següents importacions:

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

Pots utilitzar el valor recordat com a paràmetre per a altres componilbes o fins i tot com a lògica en sentències per canviar quins componilbes es mostren.

Per exemple, si no vols mostrar la salutació si el nom està buit, utilitza l’estat en una sentència if:

@Composable
fun Hello() {
    Column(modifier = Modifier.padding(16.dp)) {

        var name by remember { mutableStateOf("") }

        OutlinedTextField(
            value = name,
            onValueChange = { name = it },
            label = { Text("Name") }
        )
        if (name.isNotEmpty()) {
            Text(
                text = "Hello, $name!",
                modifier = Modifier.padding(bottom = 8.dp),
            )
        }
    }
}

Mentre que remember t’ajuda a conservar l’estat a través de les recomposicions, l’estat no es conserva a través dels canvis de configuració. Per a això, has d’utilitzar rememberSaveable. rememberSaveable desa automàticament qualsevol valor que es pugui desar en un Bundle. Per a altres valors, pots passar un objecte personalitzat saver.

Cicle de vida

El cicle de vida d’un composable es defineix pels següents esdeveniments: entrar a la Composició, ser recompost 0 o més vegades, i sortir de la Composició.

@Composable
fun MyComposable() {
    Column {
        Text("Hello")
        Text("World")
    }
}

Si un composable es crida múltiples vegades, s’afegeixen múltiples instàncies a la Composició.

Un element que té un color diferent indica que és una instància separada:

Activitats

data class Pet(val name: String, val age: Int)

Create a compose view for pet data class tha can view and update values.

Pendent

• State and Jetpack Compose
• Lifecycle of composables
• Understanding Recomposition in Jetpack Compose: A Complete Guide with Kotlin Examples