如何在Jetpack Compose中使用Viewmodel

Question

我正在尝试在Jetpack Compose中使用ViewModel，

通过增加数字来实现。

但是它不起作用。也许我没有正确使用视图模型。

这是我的主要活动代码

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()
    }
}

这是我的ViewModel类。

在使用xml时，它可以正常工作。

如何创建ViewModel对象：

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

- Arfin Hosain

Answer 1

当某些可变状态值容器发生更改时，Compose可以进行重新组合。您可以使用mutableStateOf()、mutableStateListOf()等手动创建它，或通过包装Flow/LiveData来创建。

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

    fun addNumber(){
        number++
    }
}

我建议你从Compose中的状态文档开始，包括这个Youtube视频，它解释了基本原理。

- Phil Dukhov

---

嘿@PhilDukhov，我看到了你的答案，有点困惑。你能否指导一下我在number属性下面使用了private set的用途是什么？ - Kotlin Learner

@vivekmodi 这很有用，可以确保这个变量只能由视图模型本身修改 - 通常 addNumber 将包含更多的逻辑而不仅仅是更新值，限制修改范围是一个好的实践。 - Phil Dukhov

Answer 2

我使用Hilt和ViewModel。这是另一种使用它的方式。

@Composable
fun PokemonListScreen(
    navController: NavController
) {

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

   
}

我使用这个可组合部件而不是片段，并在父级中保留一个对可组合部件的引用。

- Devrath