如何在Jetpack Compose中正确使用ViewModel实现数字递增功能

你的代码核心问题是ViewModel中的状态未被Jetpack Compose感知，Compose只有接收到可观察状态的变化通知时，才会触发UI重组刷新界面，你当前的写法无法触发重组，所以数字不会更新。具体问题和修改方案如下：

1. 状态类型错误 #

你定义的number是普通Int类型，不属于Compose可观察状态，修改时不会通知Compose重组。你需要用mutableStateOf包装该变量，配合属性委托简化读写：
修改后的ViewModel代码：

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.ViewModel

// 建议修改自定义ViewModel的类名，避免和官方androidx.lifecycle.ViewModel重名导致导包错误
class HelloViewModel: ViewModel() {
    var number by mutableStateOf(0)
        private set // 限制外部只能通过调用方法修改状态，保证数据一致性
    
    fun addNumber(){
        number++
    }
}

2. 调整Composable中的ViewModel引用 #

因为改了ViewModel类名，同步修改Greeting方法的参数：

@Composable
fun Greeting(
    helloViewModel: HelloViewModel = viewModel()
) {
    // 原有布局逻辑保持不变即可
}

可选依赖检查 #

如果你调用viewModel()方法时报错，说明你缺少ViewModel和Compose的适配依赖，需要在模块级build.gradle中添加：

implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.6.2"

版本号可以替换为和你项目其他依赖适配的稳定版本即可。

修改完成后点击按钮，状态变化会自动触发UI刷新，数字递增功能就会正常生效。

内容的提问来源于stack exchange，提问作者Arfin Hosain