Jetpack Compose中列表可变状态的正确处理及remove操作实现

Remove操作正确实现 #

你当前的写法先修改了状态持有的原列表实例，不符合Compose状态的单向数据流最佳实践，也可能因为实例变更检测的时序问题无法触发重组，正确写法如下：

// 先复制原列表生成新的可变实例，在新实例上做删除操作，再赋值给状态变量
data = data.toMutableList().apply {
    remove(ele)
}

通用列表状态更新方案 #

这里提供两种经过验证的通用方案，可覆盖所有列表操作场景：

方案1：使用不可变列表作为状态类型（推荐）

从定义层面限制直接修改列表实例，强制所有变更都生成新的列表实例触发重组，代码更易维护：

1. 状态声明改为：

// 明确指定类型为不可变的List<Int>，避免误操作修改原实例
var data by rememberSaveable {
    mutableStateOf(emptyList<Int>())
}

2. 各类操作统一写法：

• 清空列表：

data = emptyList()

• 添加元素：

// 单元素添加
data = data + ele
// 批量添加
data = data + listOf(ele1, ele2)

• 删除元素：

// 按值删除
data = data - ele
// 按索引删除
data = data.filterIndexed { index, _ -> index != targetIndex }

• 自定义修改操作：

data = data.toMutableList().apply {
    // 此处可执行任意MutableList的操作，比如修改指定位置元素
    set(index, newElement)
    // 批量删除指定范围元素
    removeRange(0, 2)
}

方案2：使用可观察可变列表mutableStateListOf

如果偏好使用原生MutableList的操作API，可以直接使用Compose提供的可观察集合，列表内部的增删改操作会自动触发重组，不需要手动赋值新实例：

1. 状态声明改为：

val data = rememberSaveable { mutableStateListOf<Int>() }

2. 各类操作直接调用原生方法即可，无需额外处理：

// 清空
data.clear()
// 添加
data.add(ele)
// 删除
data.remove(ele)
// 修改指定位置
data[index] = newElement

注意：如果列表存储的是自定义数据类型，需要给类型添加@Parcelize注解实现Parcelable接口，才能被rememberSaveable正常持久化。

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