0Pricing
Kotlin Multiplatform Academy · Урок

Привязка ViewModel к каждому интерфейсу

Соединяйте общее состояние с Compose и SwiftUI

«Привязка ViewModel к каждому интерфейсу» — бесплатный урок Kotlin Multiplatform Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Kotlin Multiplatform Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Kotlin Multiplatform Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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

Часто задаваемые вопросы

Урок «Привязка ViewModel к каждому интерфейсу» бесплатный?

Да — полный текст урока «Привязка ViewModel к каждому интерфейсу» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Kotlin Multiplatform Academy, подпишись на CoddyKit PRO. Курс Kotlin Multiplatform Academy содержит 4 уроков всего.

Чему я научусь в уроке «Привязка ViewModel к каждому интерфейсу»?

Соединяйте общее состояние с Compose и SwiftUI Ты практикуешь Kotlin Multiplatform Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Kotlin Multiplatform Academy?

Предыдущий опыт не требуется. Kotlin Multiplatform Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Привязка ViewModel к каждому интерфейсу»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Kotlin Multiplatform Academy?

Да. Каждый урок Kotlin Multiplatform Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Кроссплатформенная основа ViewModel
  2. Предоставление состояния интерфейса как StateFlow
  3. Обработка намерений и действий пользователя
  4. Привязка ViewModel к каждому интерфейсу
← Назад к Kotlin Multiplatform Academy