使用 List as State 时，如何在 Jetpack Compose 中的 item`attribute 更改时更新 UI？

Question

例如，我将数据加载到一个列表中，它由 MutableStateFlow 包装，我在 UI 组件中将这些收集为 State。

麻烦的是，当我更改 MutableStateFlow<List> 中的项目时，例如修改属性，但不添加或删除，UI 不会改变。

那么，当我修改 MutableStateFlow 的一项时，如何更改 UI？

这些是代码：

视图模型：

data class TestBean(val id: Int, var name: String)
class VM: ViewModel() {
    val testList = MutableStateFlow<List<TestBean>>(emptyList())

    fun createTestData() {
        val result = mutableListOf<TestBean>()
        (0 .. 10).forEach {
            result.add(TestBean(it, it.toString()))
        }
        testList.value = result
    }

    fun changeTestData(index: Int) {

        // first way to change data
        testList.value[index].name = System.currentTimeMillis().toString()

        // second way to change data
        val p = testList.value[index]
        p.name = System.currentTimeMillis().toString()
        val tmplist = testList.value.toMutableList()
        tmplist[index].name = p.name
        testList.update { tmplist }
}

}

用户界面：

    setContent {
        LaunchedEffect(key1 = Unit) {
            vm.createTestData()
        }
        Column {
            vm.testList.collectAsState().value.forEachIndexed { index, it ->
                Text(text = it.name, modifier = Modifier.padding(16.dp).clickable {
                    vm.changeTestData(index)
                    Log.d("TAG", "click： ${index}")
                })
            }
        }
    }

Answer 1

Flow和 Compose 可变 state 都无法跟踪包含对象内部所做的更改。

但是你可以用更新的 object 替换 object。 data class是一个很好用的工具，它会为你提供开箱即用的所有copy ，但你应该使用var发出并且只对你的字段使用val以避免错误。

查看为什么不变性在函数式编程中很重要？

testList.value[index] = testList.value[index].copy(name = System.currentTimeMillis().toString())