State

Erster Versuch

Eine normale Variable reicht nicht: Antippen ändert den Wert, aber die Anzeige bleibt gleich.

@Composable
fun WeatherScreen(/* ... */) {
    var useCelsius = true // funktioniert nicht!

    TextButton(onClick = { useCelsius = !useCelsius }) {
        Text(text = if (useCelsius) "°C" else "°F")
    }
}

Recomposition

Ändert sich State, ruft Compose die betroffenen Composables erneut auf. Das heißt Recomposition.

• mutableStateOf(…): ein Wert, dessen Änderungen Compose beobachtet
• remember { … }: behält den Wert über Recompositions hinweg
• rememberSaveable { … }: behält ihn auch beim Drehen des Bildschirms

var useCelsius by remember { mutableStateOf(true) }

State Hoisting

Den State dort halten, wo alle ihn brauchen, und ihn nach unten weitergeben. Änderungen kommen als Events zurück nach oben.

State Hoisting

var useCelsius by rememberSaveable { mutableStateOf(true) }

UnitToggle(
    useCelsius = useCelsius,                 // State ↓
    onToggle = { useCelsius = !useCelsius }, // Event ↑
)
CurrentWeatherCard(city, weather, useCelsius) // State ↓

Zusammenfassung