How to use Viewmodel with Jetpack compose

Question

I am trying to use ViewModel with Jetpack Compose,

By doing a number increment.

But it's not working. Maybe I'm not using the view model in right way.

Heres my Main Activity code

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting()
        }
    }
}

@Composable
fun Greeting(
    helloViewModel: ViewModel = viewModel()
) {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {
        Text(
            text = helloViewModel.number.toString(),
            fontSize = 60.sp,
            fontWeight = FontWeight.Bold
        )
        Button(onClick = { helloViewModel.addNumber() }) {
            Text(text = "Increment Number ${helloViewModel.number}")
        }

    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    JetpackcomposepracticeTheme {
        Greeting()
    }
}

And here is my Viewmodel class.

It works fine with xml.

How do i create the object of view model:

class ViewModel: ViewModel() {
    var number : Int = 0
    fun addNumber(){
        number++
    }
}

Phil Dukhov · Accepted Answer · 2021-12-15T02:02:22.333

17

Compose can recompose when some with mutable state value container changes. You can create it manually with mutableStateOf(), mutableStateListOf(), etc, or by wrapping Flow/LiveData.

class ViewModel: ViewModel() {
    var number : Int by mutableStateOf(0)
        private set

    fun addNumber(){
        number++
    }
}

I suggest you start with state in compose documentation, including this youtube video which explains the basic principles.

edited Dec 15 '21 at 02:02

answered Oct 27 '21 at 16:30

Phil Dukhov

67,741
15
184
220

hey @PhilDukhov I am seeing your answer and little bit confused. Can you please guide me on you used `private set` below the `number ` attribute. So what the use of that ? – Kotlin Learner Jul 18 '22 at 12:07
1

@vivekmodi it's useful to make sure this variable is only modifiable by the view model itself - often `addNumber` will contain more logic than just updating the value, and restricting modification scope is a good practice. – Phil Dukhov Jul 18 '22 at 12:22

score 0 · Answer 2 · answered Jan 27 '23 at 15:04

I use Hilt along with view-Model. Here is another way of using it

@Composable
fun PokemonListScreen(
    navController: NavController
) {

    val viewModel = hiltViewModel<PokemonListVm>()
    val lazyPokemonItems: LazyPagingItems<PokedexListEntry> = viewModel.pokemonList.collectAsLazyPagingItems()

   
}

I use this composable instead of a fragment and I keep one reference to the composable in the parent

How to use Viewmodel with Jetpack compose

2 Answers2

Linked