Jetpack Compose Academy · Aula

viewModel() em uma Composable

Obtenha e delimite um ViewModel corretamente.

viewModel() em uma Composable é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

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.

Perguntas Frequentes

A aula “viewModel() em uma Composable” é grátis?

Sim — o texto completo de “viewModel() em uma Composable” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.

O que vou aprender em “viewModel() em uma Composable”?

Obtenha e delimite um ViewModel corretamente. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Jetpack Compose Academy?

Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “viewModel() em uma Composable”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Jetpack Compose Academy?

Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Jetpack Compose Academy