0Pricing
Jetpack Compose Academy · Pelajaran

viewModel() dalam Composable

Dapatkan dan batasi cakupan ViewModel dengan benar.

viewModel() dalam Composable adalah pelajaran Jetpack Compose 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 Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Getting a ViewModel

Inside a Composable you don’t construct a ViewModel with new. Instead you call the viewModel() function to fetch the right instance.

val vm: CounterViewModel = viewModel()

Where It Comes From

The viewModel() helper looks up the nearest lifecycle owner and returns the ViewModel scoped to it, creating one only if none exists yet.

Same Instance on Recomposition

Recomposition runs your function many times, yet viewModel() returns the same instance each time, so your state never resets unexpectedly.

Reading State From It

Once you hold the ViewModel, read its observable state and your Composable redraws whenever that state changes. The UI follows the data. 🔗

val vm: CounterViewModel = viewModel()
Text("Count: " + vm.count)

Calling Its Functions

Send user actions to the ViewModel by calling its functions from event lambdas, keeping the decision-making logic out of your Composable.

Button(onClick = { vm.increment() }) {
    Text("Add")
}

The Import

The function comes from the lifecycle Compose artifact. Import androidx.lifecycle.viewmodel.compose.viewModel to use it.

import androidx.lifecycle.viewmodel.compose.viewModel

Scoping by Default

By default the ViewModel is scoped to the host Activity or navigation destination, so all Composables in that scope share one instance. 🎯

Constructor Arguments

Need to pass dependencies? Provide a factory so the framework knows how to build a ViewModel that has constructor parameters.

val vm: CartViewModel = viewModel(factory = CartFactory(repo))

Hoist, Don’t Pass Down

Call viewModel() high up, near the screen root, then pass plain state and callbacks down to keep child Composables reusable.

Preview-Friendly Design

Because viewModel() needs a real owner, design children to take simple parameters so they still render in an isolated @Preview.

A Quick Pattern

The common flow is simple: obtain the ViewModel, read its state, and forward events to its functions. Three steps, every screen. ✨

Quick Check

Check how you obtain a ViewModel from a Composable.

Recap

Call viewModel() to fetch a scoped ViewModel, read its state to drive the UI, and forward user events to its functions instead of constructing it yourself.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “viewModel() dalam Composable” gratis?

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

Apa yang akan aku pelajari di “viewModel() dalam Composable”?

Dapatkan dan batasi cakupan ViewModel dengan benar. Kamu berlatih Jetpack Compose 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 Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose 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 “viewModel() dalam Composable” 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 Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose 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. Mengapa ViewModel Bertahan setelah Rotasi
  2. viewModel() dalam Composable
  3. Memodelkan Data Class UiState
  4. collectAsStateWithLifecycle
← Kembali ke Jetpack Compose Academy