Android Academy · Pelajaran

Menyediakan State dari ViewModel

Kendalikan UI Compose dari ViewModel.

Menyediakan State dari ViewModel adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.

Mengekspos State ke UI

ViewModel menyimpan state, tetapi UI memerlukan cara untuk mengamati state tersebut dan merender ulang saat terjadi perubahan.

Di Android modern, dua alat yang umum digunakan untuk tujuan ini adalah StateFlow dan State dari Compose.

Pola Mutable dan Immutable

Praktik terbaiknya adalah menyimpan properti pendukung yang dapat diubah secara privat dan mengekspos versi hanya-baca secara publik.

Dengan begitu, UI tidak dapat mengubah state secara tidak sengaja.

Mengekspos dengan StateFlow

Gunakan MutableStateFlow secara internal dan ekspos sebagai StateFlow hanya-baca.

class CounterViewModel : ViewModel() {
    private val _count = MutableStateFlow(0)
    val count: StateFlow<Int> = _count.asStateFlow()

    fun increment() {
        _count.value++
    }
}

Mengumpulkan StateFlow di Compose

Composable mengubah aliran menjadi state Compose dengan collectAsState() (atau varian yang memperhatikan siklus hidup, yang akan dibahas nanti).

@Composable
fun CounterScreen(vm: CounterViewModel) {
    val count by vm.count.collectAsState()
    Text("Count: " + count)
}

Mengapa StateFlow Memerlukan Nilai Awal

StateFlow selalu memiliki nilai saat ini. Karena itu, Anda harus memberikan nilai awal saat membuatnya.

Setiap pengumpul baru langsung menerima nilai terbaru, bukan aliran kosong.

Alternatif: Compose mutableStateOf

Untuk state sederhana yang hanya digunakan di satu layar dalam ViewModel, Anda juga dapat menggunakan mutableStateOf dari Compose, yang diamati Compose secara otomatis.

class CounterViewModel : ViewModel() {
    var count by mutableStateOf(0)
        private set

    fun increment() { count++ }
}

StateFlow dan State Compose

StateFlow merupakan bagian dari coroutine Kotlin dan dapat digunakan di mana saja, bukan hanya di Compose. StateFlow sangat cocok untuk aliran bersama yang memperhatikan siklus hidup.
mutableStateOf bersifat khusus untuk Compose dan sangat ringkas.

StateFlow umumnya lebih disarankan untuk ViewModel dalam aplikasi yang lebih besar.

Memodelkan State Layar sebagai Satu Objek

Alih-alih menggunakan banyak aliran terpisah, kelompokkan bidang yang terkait ke dalam satu kelas data state UI. Dengan demikian, pembaruan berlangsung secara atomik dan dapat diprediksi.

data class ProfileUiState(
    val name: String = "",
    val isLoading: Boolean = false,
    val error: String? = null
)

Mengekspos Objek State UI

Ekspos satu StateFlow yang berisi kelas state tersebut. UI membaca semuanya dari satu sumber kebenaran.

private val _uiState = MutableStateFlow(ProfileUiState())
val uiState: StateFlow<ProfileUiState> =
    _uiState.asStateFlow()

Memperbarui Status yang Tidak Dapat Diubah

Perbarui status dengan menghasilkan copy yang bidangnya telah diubah, bukan dengan memutasi objek lama.

fun load() {
    _uiState.update { it.copy(isLoading = true) }
    // ... fetch, then:
    _uiState.update {
        it.copy(isLoading = false, name = "Ada")
    }
}

Peristiwa Mengalir ke Atas, Status Mengalir ke Bawah

Inilah inti dari aliran data satu arah:

Status mengalir ke bawah dari ViewModel ke UI.
Peristiwa mengalir ke atas dari UI ke ViewModel melalui pemanggilan fungsi.

Pemeriksaan Singkat

Uji pemahaman Anda tentang cara mengekspos status.

Ringkasan

Anda telah mempelajari:

Simpan MutableStateFlow secara privat, lalu ekspos StateFlow hanya-baca.
Kelompokkan bidang yang berkaitan dalam kelas data status UI.
Perbarui dengan copy() melalui update {}.
Status mengalir ke bawah, peristiwa mengalir ke atas.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyediakan State dari ViewModel” gratis?

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

Apa yang akan aku pelajari di “Menyediakan State dari ViewModel”?

Kendalikan UI Compose dari ViewModel. Kamu berlatih Android 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 Android Academy?

Tidak diperlukan pengalaman sebelumnya. Android 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 2 dari 4.

Berapa lama pelajaran “Menyediakan State dari ViewModel” 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 Android Academy ini?

Ya. Setiap pelajaran Android 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

← Kembali ke Android Academy