从列表移除项导致LazyColumn显示异常问题排查

问题根源 #

日志显示数据源更新完全正常，但UI上出现值覆盖，核心问题出在LazyColumn的组件复用逻辑上：

• 你当前用items(peopleStateSnap.size)加载列表，Compose默认以列表索引作为组件的复用标识（key）。
• 删除中间项（比如Person2）后，原列表中Person3的位置变成了新列表的索引1，Compose会直接复用原来索引1位置的ParticipantView组件——而这个旧组件的TextField状态还绑定着之前Person2的数据，导致UI显示和新数据源不匹配。

解决方案 #

1. 给Person类添加唯一标识

每个Person实例需要一个独一无二的id，确保Compose能精准区分不同项：

data class Person(
    val id: String = UUID.randomUUID().toString(), // 自动生成唯一id
    val name: String,
    val owed: Double
)

2. 修改LazyColumn的列表加载逻辑，用Person的id作为复用key

替换原来基于索引的items用法，改用带唯一key的重载方法，让Compose能准确识别每个组件对应的Person实例，避免错误复用：

val peopleState = viewModel.peopleState.collectAsState()
LazyColumn {
    val peopleList = peopleState.value
    items(
        items = peopleList,
        key = { person -> person.id } // 用Person的唯一id作为组件复用key
    ) { person ->
        ParticipantView(
            person = person,
            sharedOwed = sharedOwed.value,
            onChangeListener = {
                viewModel.updateOwed(person, it)
            },
            onRemoveClicked = {
                viewModel.removePerson(person)
            }
        )
    }
}

额外注意：确保updateOwed逻辑正确

如果你的updateOwed方法是直接修改Person对象的属性，要注意Person作为data class，必须生成新实例来触发StateFlow的状态更新（因为data class的equals基于属性，不生成新实例的话StateFlow可能无法感知变化）：

fun updateOwed(person: Person, newOwed: Double) {
    val currentList = peopleStateFlow.value.toMutableList()
    val index = currentList.indexOf(person)
    if (index != -1) {
        // 生成新的Person实例替换原对象
        currentList[index] = person.copy(owed = newOwed)
        peopleStateFlow.value = currentList
    }
}

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