the State? State An interface that has a value property during the execution of a Composable function. MutableState A mutable value holder where reads to the value property during the execution of a Composable function. Any changes to value will schedule recomposition of any composable functions that read value.
the State? Value Holder A value holder where reads to the value property during the execution of a Composable function. Recomposition Trigger When the value property is written to and changed, recomposition of any subscribed Recompose scopes will be scheduled. Observable The current Recompose scope will observe states and be subscribed to changes of that value.
fun WaterCounter(modifier: Modifier = Modifier) { Column(modifier = modifier.padding(16.dp)) { var count by remember { mutableStateOf(0) } Text("You've had $count glasses.") Button(onClick = { count++ }, Modifier.padding(top = 8.dp)) { Text("Add one") } } } State and Remember Remember Composable functions can use the remember API to store an object in memory.
@Composable fun WaterCounter(modifier: Modifier = Modifier) { val count: MutableState<Int> by rememberSaveable { mutableStateOf(0) } .. } RememberSaveable It behaves similarly to remember, but the stored value will survive the activity or process recreation using the saved instance state mechanism. • Configuration changes • Switch between dark and light mode • Change language settings
Stateless? Single source of truth By moving state instead of duplicating it, we're ensuring there's only one source of truth. This helps avoid bugs. Decoupled The state for the stateless Composable may be stored anywhere. It increases the reusability of the stateless Composable. Encapsulated Only stateful composables will be able to modify their state. It's completely internal.
Composable A Composable B Composable C @Composable fun ComposableA() { ComposableB(Color.White) } @Composable fun ComposableB(color: Color) { ComposableC(Color.White) } @Composable fun ComposableC(color: Color) { .. }
Composable A Composable B Composable C @Composable fun ComposableA() { ComposableB(Color.White) } @Composable fun ComposableB(color: Color) { ComposableC(Color.White) } @Composable fun ComposableC(color: Color) { .. }
Composable A Composable B Composable C @Composable fun ComposableA() { ComposableB(Color.White) } @Composable fun ComposableB(color: Color) { ComposableC(Color.White) } @Composable fun ComposableC(color: Color) { .. } Dependency
Composable A Composable B Composable C @Composable fun ComposableA() { CompositionLocalProvider(LocalColor provides color) { .. } @Composable fun ComposableB() { ComposableC() } @Composable fun ComposableC() { val color = LocalColor.current }
https://developer.android.com/jetpack/compose/compositionlocal val ColorCompositionLocal = staticCompositionLocalOf<Color> { error("No Color provided") } CompositionLocalProvider(ColorCompositionLocal provides color) { MyComposableFunction(...) } @Composable fun MyComposableFunction() { val color = ColorCompositionLocal.current }
skydoves
mom0tomo
yaotti
yui_knk
jinwatanabe
minodriven
koic
ochtum
kkamegawa
ternbusty
hollycummins
kntkymt
fadis
reverentgeek
ipullrank
mfonobong
axbom
aleyda
afnizarnur
honnibal
leimatthew05
kimpetersen
wayneb77
chriscoyier
