Compose中如何正确观察ViewModel内变量状态并更新UI？

你当前的代码中，Composable里的whosTurn是一个本地的MutableState，仅在首次组合时从ViewModel获取初始值。它和ViewModel中的whosTurn是两个完全独立的状态对象，当ViewModel内的变量更新时，本地的状态不会自动同步，导致UI无法感知变化，始终显示初始值1。

有两种常用的正确实现方式，可根据场景选择：

方式一：直接引用ViewModel的可观察状态 #

由于ViewModel中的whosTurn本身就是MutableState（Compose的可观察状态类型），你可以在Composable中直接引用它的value属性，Compose会自动追踪该值的变化并触发UI重组：

修改后的Composable代码：

@Composable
fun ScreenSetup(viewModel: myViewModel) {
    Column {
        Row {
            // 直接引用ViewModel的whosTurn.value，Compose会自动观察变化
            Text(text = "Current Turn = ${viewModel.whosTurn.value}")
        }
        Row {
            Button(onClick = {
                viewModel.newTurn()
            }) {
                Text(text = "Next Turn")
            }
        }
    }
}

方式二：使用StateFlow（更推荐的单向数据流方案） #

在ViewModel中使用StateFlow管理状态是更规范的做法，它遵循单向数据流原则，避免直接暴露可变状态给UI层：

修改ViewModel代码 #

class myViewModel : ViewModel() {
    // 私有可变StateFlow，仅在ViewModel内部修改
    private val _whosTurn = MutableStateFlow(1)
    // 对外暴露不可变的StateFlow，供UI观察
    val whosTurn: StateFlow<Int> = _whosTurn.asStateFlow()

    fun newTurn() {
        Log.i("tag", _whosTurn.value.toString())
        val nextTurn = _whosTurn.value + 1
        // 简化逻辑，直接赋值新值
        _whosTurn.value = if (nextTurn == 4) 1 else nextTurn
    }
}

修改Composable代码 #

使用collectAsState()将StateFlow转换为Compose可观察的状态：

@Composable
fun ScreenSetup(viewModel: myViewModel) {
    // 将StateFlow转换为Compose状态，自动追踪变化
    val whosTurn by viewModel.whosTurn.collectAsState()
    
    Column {
        Row {
            Text(text = "Current Turn = $whosTurn")
        }
        Row {
            Button(onClick = {
                viewModel.newTurn()
            }) {
                Text(text = "Next Turn")
            }
        }
    }
}

• 命名规范：ViewModel类名建议首字母大写（如MyViewModel），符合Kotlin的编码规范。
• 单向数据流：推荐使用方式二，因为它限制了状态的修改只能在ViewModel内部进行，UI层仅负责观察和触发操作，让状态流转更清晰，减少潜在的bug。

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