0Pricing
Kotlin Multiplatform Academy · Pelajaran

Menghubungkan ViewModel ke Setiap UI

Hubungkan status bersama ke Compose dan SwiftUI

Menghubungkan ViewModel ke Setiap UI adalah pelajaran Kotlin Multiplatform Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Kotlin Multiplatform Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Kotlin Multiplatform Academy mencakup 4 pelajaran total.

Tahap Akhir

ViewModel bersama Anda sudah siap. Kini setiap UI asli hanya perlu mengamati statusnya dan meneruskan niat pengguna. Itulah penghubungan terakhir.

Compose Mengumpulkan Status

Di Android, gunakan collectAsState untuk mengubah StateFlow menjadi status Compose. Setiap emisi secara otomatis merender ulang layar.

val state by viewModel.state.collectAsState()

Gambar dari Status Itu

Komponen yang dapat disusun membaca state yang telah dikumpulkan dan merendernya. Kini UI menjadi fungsi murni dari keluaran ViewModel bersama.

Text(state.name)
if (state.isLoading) CircularProgressIndicator()

Kirim Niat dari Compose

Hubungkan tombol ke onIntent. Pengguna mengetuknya, Compose meneruskan tindakan, dan ViewModel bersama menentukan tindakan berikutnya.

Button(onClick = {
    viewModel.onIntent(HomeIntent.Refresh)
}) { Text("Refresh") }

iOS Membutuhkan Penghubung

SwiftUI tidak dapat mengumpulkan Kotlin Flow secara langsung. Sebuah pembungkus yang dapat diamati menjembatani StateFlow menjadi sesuatu yang dapat dipantau SwiftUI.

Pembungkus ObservableObject

Bungkus ViewModel dalam ObservableObject Swift. Pembungkus ini menyimpan salinan status yang dipublikasikan dan meneruskan pembaruan ke SwiftUI.

class HomeObservable: ObservableObject {
    @Published var state = HomeState(isLoading: false, name: "")
}

Kumpulkan Flow di Swift

Di dalam pembungkus, kumpulkan StateFlow Kotlin dan tetapkan setiap nilai ke properti yang dipublikasikan. SkieKit juga dapat membuatnya untuk Anda.

Render di SwiftUI

Tampilan SwiftUI mengamati pembungkus tersebut dan membaca state dengan cara yang sama. Satu kebenaran bersama, digambar dalam gaya asli Apple.

Text(observable.state.name)

Kirim Niat dari Swift

Tombol di SwiftUI juga memanggil onIntent milik ViewModel yang dibungkus, sehingga ketukan di iOS masuk ke logika bersama yang sama persis.

Button("Refresh") {
    observable.viewModel.onIntent(intent: .refresh)
}

Bersihkan Saat Menghilang

Saat layar ditutup, panggil hapus() milik ViewModel dari siklus hidup setiap platform agar cakupan dibatalkan dan tidak ada yang bocor.

Otak Sama, Dua Wajah

Kedua aplikasi kini berbagi satu ViewModel: status dan keputusan yang sama, hanya cara merendernya yang berbeda. Inilah keunggulan KMP. 🎉

Pemeriksaan Singkat

Mari pastikan cara SwiftUI menggunakan StateFlow bersama.

Rangkuman

Compose menggunakan collectAsState; SwiftUI menggunakan pembungkus ObservableObject. Keduanya mengamati status dan mengirim niat ke satu ViewModel bersama. 🚀

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menghubungkan ViewModel ke Setiap UI” gratis?

Ya — teks lengkap “Menghubungkan ViewModel ke Setiap UI” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Kotlin Multiplatform Academy, upgrade ke CoddyKit PRO. Kursus Kotlin Multiplatform Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menghubungkan ViewModel ke Setiap UI”?

Hubungkan status bersama ke Compose dan SwiftUI Kamu berlatih Kotlin Multiplatform Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Kotlin Multiplatform Academy?

Tidak diperlukan pengalaman sebelumnya. Kotlin Multiplatform Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Menghubungkan ViewModel ke Setiap UI” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Kotlin Multiplatform Academy ini?

Ya. Setiap pelajaran Kotlin Multiplatform Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Basis ViewModel Lintas Platform
  2. Membuka Status UI sebagai StateFlow
  3. Menangani Intensi & Aksi Pengguna
  4. Menghubungkan ViewModel ke Setiap UI
← Kembali ke Kotlin Multiplatform Academy