使用 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())