0Pricing
Kotlin Multiplatform Academy · Leçon

Lier le ViewModel à chaque interface

Reliez l’état partagé à Compose et à SwiftUI.

Lier le ViewModel à chaque interface est une leçon Kotlin Multiplatform Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Kotlin Multiplatform Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Kotlin Multiplatform Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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. 🚀

Questions Fréquemment Posées

La leçon « Lier le ViewModel à chaque interface » est-elle gratuite ?

Oui — le texte complet de « Lier le ViewModel à chaque interface » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Kotlin Multiplatform Academy, passe à CoddyKit PRO. Le cours Kotlin Multiplatform Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Lier le ViewModel à chaque interface » ?

Reliez l’état partagé à Compose et à SwiftUI. Tu pratiques Kotlin Multiplatform Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Kotlin Multiplatform Academy ?

Aucune expérience préalable n'est requise. Kotlin Multiplatform Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Lier le ViewModel à chaque interface » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Kotlin Multiplatform Academy ?

Oui. Chaque leçon Kotlin Multiplatform Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Une base de ViewModel multiplateforme
  2. Exposer l’état de l’interface comme StateFlow
  3. Gérer les intentions et actions de l’utilisateur
  4. Lier le ViewModel à chaque interface
← Retour à Kotlin Multiplatform Academy