Jetpack Compose可观察可变对象使用疑问：State<List<T>>与mutableStateListOf

注意：在Compose中使用ArrayList或mutableListOf()等可变对象作为状态，会导致用户在应用中看到不正确或过时的数据。
ArrayList或可变数据类等不可观察的可变对象无法被Compose观察，其变化不会触发重组。
建议使用State和不可变的listOf()等可观察数据持有者，而非不可观察的可变对象。

用户疑问 #

1. 我对此感到困惑，如何使用State<List<T>>和不可变的listOf()来创建可观察的可变对象？
2. 我认为代码A很简洁，它是一个可观察的可变对象，我可以通过expandedRecordIndex.add(1)等方式修改数据，UI也会随之变化，对吗？

代码A

val expandedRecordIndex = mutableStateListOf<Int>()

解答 #

问题1：用State<List<T>>和不可变listOf()实现可观察列表状态

核心思路是借助mutableStateOf包装不可变列表，每次修改时生成全新的列表实例——因为mutableStateOf会监听value的引用变化，只要引用更新，Compose就会触发重组。示例代码如下：

// 初始化空的不可变列表状态
val itemsState = remember { mutableStateOf(listOf<Int>()) }

// 添加元素：生成新列表替换原状态
fun addItem(item: Int) {
    itemsState.value = itemsState.value + item
    // 也可以用这种写法：itemsState.value = listOf(*itemsState.value.toTypedArray(), item)
}

// 删除元素：同样生成新列表
fun removeItem(index: Int) {
    itemsState.value = itemsState.value.filterIndexed { idx, _ -> idx != index }
}

问题2：mutableStateListOf能否正确触发UI更新？

完全可以。mutableStateListOf()是Compose官方提供的可观察可变列表实现，它内部已经封装了状态变化的通知逻辑。当你调用add()、remove()、clear()等方法修改列表内容时，Compose能自动感知到变化并触发UI重组，你的界面会同步更新。

需要说明的是，mutableStateListOf和State<List<T>>+不可变列表都是官方认可的方案：前者适合频繁修改列表内容的场景（无需每次创建新列表实例），后者则更贴合不可变数据的设计理念，可根据实际场景选择。

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