Status & Rekomposisi dalam UI Bersama
Kendalikan Compose dari StateFlow bersama Anda
Status & Rekomposisi dalam UI Bersama adalah pelajaran Kotlin Multiplatform Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
UI adalah Fungsi dari Status
Dalam Compose, layar digambar dari status. Saat status berubah, Compose hanya menggambar ulang bagian yang bergantung padanya. Anda tidak perlu mengubah tampilan secara manual.
Penjelasan Komposisi Ulang
Penggambaran ulang otomatis itu disebut komposisi ulang. Compose menjalankan kembali composable yang terdampak dengan nilai baru dan memperbarui layar untuk Anda.
Ingat Status Lokal
Untuk status yang dimiliki composable, gunakan remember bersama mutableStateOf agar nilainya tetap ada selama komposisi ulang, bukan diatur ulang pada setiap bingkai.
val count = remember { mutableStateOf(0) }Baca dan Tulis Status
Bungkus nilainya dengan by agar dapat membaca dan menulisnya seperti variabel biasa. Membacanya membuat composable berlangganan, sehingga penulisan memicu penggambaran ulang.
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
Text("Count: " + count)
}Naikkan Status ke Atas
Pindahkan status ke induk umum terendah dan teruskan nilainya ke bawah. Pengangkatan status ini membuat composable anak tanpa status, dapat digunakan kembali, dan mudah diuji.
@Composable
fun Counter(value: Int, onInc: () -> Unit) {
Button(onClick = onInc) { Text("" + value) }
}Status Berada di Kode Bersama
Sumber kebenaran Anda yang sebenarnya adalah lapisan bersama. StateFlow lintas platform menyimpan status layar satu kali, jauh dari kerangka UI platform mana pun.
val uiState: StateFlow<ScreenState> = _stateKumpulkan StateFlow di Compose
Jembatani aliran tersebut ke Compose dengan collectAsState. Komponen yang dapat dikomposisikan akan mengamatinya dan melakukan komposisi ulang setiap kali status bersama memancarkan nilai baru.
val state by viewModel.uiState.collectAsState()
Text(state.title)Satu Sumber Kebenaran
Karena status mengalir dari kode bersama ke Compose, Android dan iOS menampilkan layar yang benar-benar sama dari satu sumber kebenaran. Tidak ada perbedaan.
Hindari Efek Samping dalam Komponen yang Dapat Dikomposisikan
Komponen yang dapat dikomposisikan dapat dijalankan berkali-kali, jadi jangan pernah melakukan pekerjaan seperti panggilan jaringan langsung di dalam badannya. Jadikan komponen tersebut deskripsi murni dan dorong efek ke tempat lain.
LaunchedEffect untuk Pekerjaan Sampingan
Saat Anda harus memulai coroutine yang terkait dengan UI, gunakan LaunchedEffect. Efek ini berjalan sekali untuk setiap kunci dan otomatis dibatalkan saat komponen yang dapat dikomposisikan keluar.
LaunchedEffect(Unit) {
viewModel.load()
}Status Turunan dan Stabil
Hitung nilai dari status yang sudah ada dengan derivedStateOf agar nilai tersebut dihitung ulang hanya saat inputnya berubah, sehingga komposisi ulang tetap ringan.
Pemeriksaan Singkat
Apa yang mempertahankan nilai di antara komposisi ulang?
Rangkuman: Status Menggerakkan UI
Anda telah mempelajari bahwa status menggerakkan komposisi ulang, cara mengingat dan menaikkannya, serta cara StateFlow bersama memasok data ke Compose agar kedua aplikasi menampilkan satu sumber kebenaran. 🔁
Belajar Kotlin dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Status & Rekomposisi dalam UI Bersama” gratis?
Ya — teks lengkap “Status & Rekomposisi dalam UI Bersama” 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 “Status & Rekomposisi dalam UI Bersama”?
Kendalikan Compose dari StateFlow bersama Anda 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 3 dari 4.
Berapa lama pelajaran “Status & Rekomposisi dalam UI Bersama” 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
- Mengaktifkan Compose Multiplatform
- Tata Letak, Modifier & Tema
- Status & Rekomposisi dalam UI Bersama
- Menampung UI Bersama di iOS & Desktop