Zustand und Rekombination in der gemeinsamen UI
Compose mit Ihrem gemeinsamen StateFlow steuern
Zustand und Rekombination in der gemeinsamen UI ist eine kostenlose Kotlin Multiplatform Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Kotlin Multiplatform Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Kotlin Multiplatform Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
UI Is a Function of State
In Compose your screen is drawn from state. When the state changes, Compose redraws only the parts that depend on it. You never mutate views by hand.
Recomposition Explained
That automatic redraw is called recomposition. Compose re-runs the affected composables with the new values and updates the screen for you.
Remember Local State
For state owned by a composable, use remember with mutableStateOf so the value survives recomposition instead of resetting every frame.
val count = remember { mutableStateOf(0) }Read and Write State
Wrap the value in by to read and write it like a normal variable. Reading it subscribes the composable, so writing triggers a redraw.
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
Text("Count: " + count)
}Hoist State Upward
Move state to the lowest common parent and pass values down. This hoisting keeps child composables stateless, reusable and easy to test.
@Composable
fun Counter(value: Int, onInc: () -> Unit) {
Button(onClick = onInc) { Text("" + value) }
}State Lives in Shared Code
Your real source of truth is the shared layer. A cross-platform StateFlow holds screen state once, far from any platform UI framework.
val uiState: StateFlow<ScreenState> = _stateCollect StateFlow in Compose
Bridge that flow into Compose with collectAsState. The composable observes it and recomposes whenever the shared state emits a new value.
val state by viewModel.uiState.collectAsState()
Text(state.title)One Source of Truth
Because state flows from shared code into Compose, Android and iOS render the exact same screen from a single source of truth. No drift.
Avoid Side Effects in Composables
A composable can run many times, so never do work like network calls directly in its body. Keep it a pure description and push effects elsewhere.
LaunchedEffect for Side Work
When you must start a coroutine tied to the UI, use LaunchedEffect. It runs once per key and cancels automatically when the composable leaves.
LaunchedEffect(Unit) {
viewModel.load()
}Derived and Stable State
Compute values from existing state with derivedStateOf so they recalculate only when their inputs change, keeping recomposition cheap.
Quick Check
What keeps a value across recompositions?
Recap: State Drives the UI
You learned that state drives recomposition, how to remember and hoist it, and how shared StateFlow feeds Compose so both apps render one truth. 🔁
Häufig gestellte Fragen
Ist die Lektion „Zustand und Rekombination in der gemeinsamen UI“ kostenlos?
Ja — der vollständige Text von „Zustand und Rekombination in der gemeinsamen UI“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Kotlin Multiplatform Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Kotlin Multiplatform Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Zustand und Rekombination in der gemeinsamen UI“?
Compose mit Ihrem gemeinsamen StateFlow steuern Du übst Kotlin Multiplatform Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Kotlin Multiplatform Academy zu starten?
Keine Vorkenntnisse erforderlich. Kotlin Multiplatform Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Zustand und Rekombination in der gemeinsamen UI“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Kotlin Multiplatform Academy-Lektion Code schreiben und ausführen?
Ja. Jede Kotlin Multiplatform Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Compose Multiplatform aktivieren
- Layouts, Modifier und Theming
- Zustand und Rekombination in der gemeinsamen UI
- Gemeinsame UI auf iOS und Desktop hosten