I have a todo list in Jetpack Compose displayed in LazyColumn.
data class TodoItem(val id: Int, val title: String, var urgent: Boolean = false)
val todoList = listOf(
TodoItem(0, "My First Task", true),
TodoItem(1, "My Second Task", true),
TodoItem(2, "My Third Task"),
)
@Composable
fun Greeting(name: String) {
val todoListState = remember {
todoList.toMutableStateList()
}
LazyColumn(modifier = Modifier.fillMaxHeight()) {
items(items = todoListState, itemContent = { item ->
Row(modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
Text(
modifier = Modifier.weight(1f).padding(8.dp),
text = item.title)
Checkbox(
checked = item.urgent,
onCheckedChange = {
val index = todoListState.indexOf(item)
todoListState[index] = todoListState[index].copy(urgent = it)
Log.d("Track", "$todoList")
}
)
}
})
}
}
The first time it is
[TodoItem(id=0, title=My First Task, urgent=true),
TodoItem(id=1, title=My Second Task, urgent=true),
TodoItem(id=2, title=My Third Task, urgent=false)]
After I updated first to false, then it's false
[TodoItem(id=0, title=My First Task, urgent=false),
TodoItem(id=1, title=My Second Task, urgent=true),
TodoItem(id=2, title=My Third Task, urgent=false)]
When I update first to true back, the todoItem
no longer change and remain as
After I updated first to false, then it's false
[TodoItem(id=0, title=My First Task, urgent=false),
TodoItem(id=1, title=My Second Task, urgent=true),
TodoItem(id=2, title=My Third Task, urgent=false)]
I check the todoListState
(the SnapshotStateList), and it's no longer in sync with todoList
. What causes that? How to fix it?
Updated
To fix it, I can use
Checkbox(
checked = item.urgent,
onCheckedChange = {
val index = todoListState.indexOf(item)
todoListState[index] = todoListState[index].copy(urgent = it)
todoList[index].urgent = it
Log.d("Track", "$todoList")
}
)
But that means I have to change 2 item at the same time. How can I just change one, and get both updated?