Powiązanie ViewModel z każdym interfejsem
Łączenie współdzielonego stanu z Compose i SwiftUI
Powiązanie ViewModel z każdym interfejsem to bezpłatna lekcja Kotlin Multiplatform Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Kotlin Multiplatform Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Kotlin Multiplatform Academy zawiera 4 lekcji w sumie.
Ostatni etap
Współdzielony ViewModel jest gotowy. Teraz każdy natywny interfejs użytkownika musi tylko obserwować jego stan i przekazywać intencje użytkownika. To ostatnie połączenie elementów.
Compose zbiera stan
Na Androidzie użyj collectAsState, aby przekształcić StateFlow w stan Compose. Każda emisja automatycznie powoduje ponowne skomponowanie ekranu.
val state by viewModel.state.collectAsState()Rysuj na podstawie tego stanu
Komponent composable odczytuje zebrany state i go renderuje. Interfejs użytkownika jest teraz czystą funkcją wyjścia współdzielonego ViewModelu.
Text(state.name)
if (state.isLoading) CircularProgressIndicator()Wysyłaj intencje z Compose
Połącz przycisk z funkcją onIntent. Użytkownik naciska przycisk, Compose przekazuje akcję, a współdzielony ViewModel decyduje, co zrobić.
Button(onClick = {
viewModel.onIntent(HomeIntent.Refresh)
}) { Text("Refresh") }iOS potrzebuje mostu
SwiftUI nie może bezpośrednio zbierać Kotlin Flow. Niewielki observable wrapper łączy StateFlow z obiektem, który SwiftUI może obserwować.
Wrapper ObservableObject
Owiń ViewModel w obiekt Swift ObservableObject. Przechowuje on opublikowaną kopię stanu i przekazuje aktualizacje do SwiftUI.
class HomeObservable: ObservableObject {
@Published var state = HomeState(isLoading: false, name: "")
}Zbieraj Flow w Swift
Wewnątrz wrappera zbieraj kotlinowy StateFlow i przypisuj każdą wartość do opublikowanej właściwości. SkieKit może również wygenerować ten kod za Ciebie.
Renderuj w SwiftUI
Widok SwiftUI obserwuje wrapper i odczytuje state w ten sam sposób. Jedno współdzielone źródło prawdy, narysowane w natywnym stylu Apple.
Text(observable.state.name)Wysyłaj intencje ze Swift
Przyciski w SwiftUI również wywołują onIntent opakowanego ViewModelu, więc stuknięcia w iOS trafiają do dokładnie tej samej współdzielonej logiki.
Button("Refresh") {
observable.viewModel.onIntent(intent: .refresh)
}Czyść przy znikaniu
Gdy ekran się zamyka, wywołaj clear() ViewModelu w cyklu życia każdej platformy, aby anulować zakres i zapobiec wyciekom.
Ten sam mózg, dwie twarze
Obie aplikacje współdzielą teraz jeden ViewModel: identyczny stan i identyczne decyzje, różni się tylko renderowanie. To KMP w najlepszym wydaniu. 🎉
Szybkie sprawdzenie
Sprawdźmy, jak SwiftUI korzysta ze współdzielonego StateFlow.
Podsumowanie
Compose używa collectAsState, a SwiftUI wrappera ObservableObject. Oba interfejsy obserwują stan i wysyłają intencje do jednego współdzielonego ViewModelu. 🚀
Ucz się Kotlin dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Powiązanie ViewModel z każdym interfejsem” jest bezpłatna?
Tak — pełny tekst „Powiązanie ViewModel z każdym interfejsem” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Kotlin Multiplatform Academy, przejdź na CoddyKit PRO. Kurs Kotlin Multiplatform Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Powiązanie ViewModel z każdym interfejsem”?
Łączenie współdzielonego stanu z Compose i SwiftUI Ćwiczysz Kotlin Multiplatform Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Kotlin Multiplatform Academy?
Nie wymagamy żadnego doświadczenia. Kotlin Multiplatform Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Powiązanie ViewModel z każdym interfejsem”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Kotlin Multiplatform Academy?
Tak. Każda lekcja Kotlin Multiplatform Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Wieloplatformowa baza ViewModel
- Udostępnianie stanu interfejsu jako StateFlow
- Obsługa intencji i działań użytkownika
- Powiązanie ViewModel z każdym interfejsem