0Pricing
Jetpack Compose Academy · Урок

viewModel() в Composable

Правильно получайте ViewModel и задавайте область её действия.

«viewModel() в Composable» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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.

Часто задаваемые вопросы

Урок «viewModel() в Composable» бесплатный?

Да — полный текст урока «viewModel() в Composable» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.

Чему я научусь в уроке «viewModel() в Composable»?

Правильно получайте ViewModel и задавайте область её действия. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?

Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «viewModel() в Composable»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?

Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Почему ViewModel переживает поворот экрана
  2. viewModel() в Composable
  3. Моделирование класса данных UiState
  4. collectAsStateWithLifecycle
← Назад к Jetpack Compose Academy