Jetpack Compose使用mutableStateListOf增删元素后无法获取单个ToDo对象问题

问题根源 #

你出现该问题的核心原因是mutableStateListOf的传参逻辑不符合预期：mutableStateListOf接收的是可变长度的单个元素参数，你直接将完整的DataProvider.listOfToDoEntries列表作为参数传入时，生成的状态列表实际类型为MutableList<List<ToDo>>，相当于把整个待办列表当成了状态列表的第一个元素，遍历的时候自然会拿到完整列表而非单个ToDo对象。

解决方案 #

修改状态列表的初始化逻辑即可，两种常用写法二选一：

1. 用apply+addAll初始化

val todos = remember {
    mutableStateListOf<ToDo>().apply {
        addAll(DataProvider.listOfToDoEntries)
    }
}

2. 用星号展开运算符拆分列表为单个元素传入

val todos = remember {
    mutableStateListOf(*DataProvider.listOfToDoEntries.toTypedArray())
}

修改完成后原有LazyColumn的遍历逻辑无需改动，遍历拿到的it就会是单个ToDo对象。

扩展：增删逻辑实现参考 #

修改完成后你可以直接通过操作todos列表实现增删，列表变化会自动触发界面重组：

• 新增待办：给+按钮添加点击逻辑

Button(
    onClick = {
        // 替换为你自己的待办构造逻辑
        todos.add(ToDo(title = "新待办", description = "请填写待办内容"))
    },
    // 原有参数不变
) {
    Text(text = "+")
}

• 删除待办：给子组件添加删除回调
  首先修改CreateToDoListItem定义，新增删除回调参数：

@Composable
fun CreateToDoListItem(todo: ToDo, onDelete: () -> Unit) {
    // 原有代码不变，仅修改删除按钮的点击逻辑
    OutlinedButton(
        onClick = onDelete,
        // 原有参数不变
    ) {
        Text(text = "X")
    }
}

然后在列表遍历处传入删除逻辑：

items(items = todos, itemContent = { todo ->
    CreateToDoListItem(
        todo = todo,
        onDelete = { todos.remove(todo) }
    )
})

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