Jetpack Compose多维状态同步数据源及触发重组问题咨询

• 问题1（点击now不触发重组）：toMutableStateList() 仅能感知列表本身的增、删、替换元素这类结构变化，无法感知列表内部Task实例的属性变更，也无法感知Task内部completions列表的变化，所以新增Record后Compose收不到状态变更通知，不会触发重组。
• 问题2（新增Task不同步到数据源）：toMutableStateList() 是基于原列表创建了一个新的独立状态列表，你直接往这个新列表加元素，操作的不是ViewModel里的SourceOfTruth原列表，自然不会同步到数据源。

核心原则是单向数据流：所有数据修改操作都封装在ViewModel中，保证状态和单一数据源始终绑定，UI层只消费状态和调用ViewModel的修改方法。

步骤1：改造ViewModel，统一管理状态和数据源 #

class MyModel : ViewModel() {
    // 单一数据源
    private val source = SourceOfTruth().apply {
        add(
            Task("exercise", 30).apply {
                createRecord("push ups")
                createRecord("sit ups")
            }
        )
        add(Task("dishes", 10))
    }
    // 暴露给UI的可观察状态，用MutableStateList保证能感知列表结构变化
    private val _tasks = source.toMutableStateList()
    val tasks: List<Task> = _tasks

    // 封装新增Record的方法
    fun addRecordToTask(task: Task, description: String, duration: Int = task.defaultAmount) {
        // 先修改数据源
        task.createRecord(description, duration)
        // 通知Compose状态变更：因为修改的是Task内部属性，替换列表对应元素触发状态更新通知
        val index = _tasks.indexOf(task)
        if (index != -1) {
            _tasks[index] = _tasks[index]
        }
        source.print()
    }

    // 封装新增Task的方法
    fun addNewTask(name: String, defaultAmount: Int) {
        val newTask = Task(name, defaultAmount)
        // 同时更新数据源和状态列表
        source.add(newTask)
        _tasks.add(newTask)
        source.print()
    }
}

步骤2：改造UI层，仅消费状态和调用ViewModel方法 #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val myModel: MyModel by viewModels()
            val tasks = myModel.tasks
            Column {
                tasks.forEach { task ->
                    Row {
                        Text(task.name)
                        task.completions.forEach { Text(it.timeStamp.toString().dropLast(15)) }
                        Button(
                            onClick = {
                                myModel.addRecordToTask(task, "dummy")
                            }
                        ) { 
                            Text("now") 
                        }
                    }
                }
                Button(
                    onClick = {
                        myModel.addNewTask("dummy task", 90)
                    }
                ) { 
                    Text("new Task") 
                }
            }
        }
    }
}

可选长期优化方案 #

如果后续还要修改Task名称、Record时长这类深层属性，建议把数据类的可变属性用MutableState包裹，或者改用不可变数据类+不可变集合，每次修改都生成新的实例，Compose可以自动感知所有层级的状态变更，不需要手动通知更新：

// 用MutableState包裹可变属性的示例
data class Task(
    val name: MutableState<String>,
    val defaultAmount: MutableState<Int>,
    val completions: SnapshotStateList<Record> = mutableStateListOf()
)

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