Das ViewModel an jede UI binden
Gemeinsamen Zustand mit Compose und SwiftUI verbinden
Das ViewModel an jede UI binden ist eine kostenlose Kotlin Multiplatform Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.
The Last Mile
Your shared ViewModel is ready. Now each native UI just needs to observe its state and forward user intents. That is the final wiring.
Compose Collects State
On Android, use collectAsState to turn the StateFlow into Compose state. Every emission recomposes the screen automatically.
val state by viewModel.state.collectAsState()Draw from That State
Your composable reads the collected state and renders it. The UI is now a pure function of the shared ViewModel's output.
Text(state.name)
if (state.isLoading) CircularProgressIndicator()Send Intents from Compose
Wire a button to onIntent. The user taps, Compose forwards the action, and the shared ViewModel decides what to do.
Button(onClick = {
viewModel.onIntent(HomeIntent.Refresh)
}) { Text("Refresh") }iOS Needs a Bridge
SwiftUI cannot collect a Kotlin Flow directly. A tiny observable wrapper bridges StateFlow into something SwiftUI can watch.
An ObservableObject Wrapper
Wrap the ViewModel in a Swift ObservableObject. It holds a published copy of the state and feeds SwiftUI updates.
class HomeObservable: ObservableObject {
@Published var state = HomeState(isLoading: false, name: "")
}Collect the Flow in Swift
Inside the wrapper, collect the Kotlin StateFlow and assign each value to the published property. SkieKit can also generate this for you.
Render in SwiftUI
The SwiftUI view observes the wrapper and reads state the same way. One shared truth, drawn in Apple's native style.
Text(observable.state.name)Send Intents from Swift
Buttons in SwiftUI call the wrapped ViewModel's onIntent too, so iOS taps flow into the exact same shared logic.
Button("Refresh") {
observable.viewModel.onIntent(intent: .refresh)
}Clear on Disappear
When a screen closes, call the ViewModel's clear() from each platform's lifecycle so the scope cancels and nothing leaks.
Same Brain, Two Faces
Both apps now share one ViewModel: identical state, identical decisions, only the rendering differs. That is KMP at its best. 🎉
Quick Check
Let's confirm how SwiftUI consumes a shared StateFlow.
Recap
Compose uses collectAsState; SwiftUI uses an ObservableObject wrapper. Both observe state and send intents to one shared ViewModel. 🚀
Häufig gestellte Fragen
Ist die Lektion „Das ViewModel an jede UI binden“ kostenlos?
Ja — der vollständige Text von „Das ViewModel an jede UI binden“ 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 „Das ViewModel an jede UI binden“?
Gemeinsamen Zustand mit Compose und SwiftUI verbinden 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 4 von 4.
Wie lange dauert die Lektion „Das ViewModel an jede UI binden“?
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
- Eine plattformübergreifende ViewModel-Basisklasse
- UI-Zustand als StateFlow bereitstellen
- User-Intents und Aktionen verarbeiten
- Das ViewModel an jede UI binden