Jetpack Compose: LazyColumn not updating with MutableList-CodePudding

I am trying to strikethrough a text at the click of a button using Jetpack Compose but the UI is not updating.

I have tried to set a button and on the click of a button, deletedTasks gets updated and if my task is in deletedTasks then it should show up with a strikethrough.

This change only happens manually but I want it to be automatic

I am not sure how to go about this. This is my first time trying Jetpack Compose, any help would be appreciated

@Composable
fun toDoItem(title: String, category: String, task: Task) {

    val rememberTask = remember { mutableStateOf(deletedTasks) }

    Surface(...) {

        Column (...) {

            Row {
                Column (...) {
                    if (!deletedTasks.contains(task)){
                        Text(text = title, style = MaterialTheme.typography.h4.copy(
                            fontWeight = FontWeight.Bold
                        ))
                    } else {
                        Text(text = title, style = MaterialTheme.typography.h4.copy(
                            fontWeight = FontWeight.Bold
                        ), textDecoration = TextDecoration.LineThrough)
                    }
                }
                IconButton(onClick = {
                    rememberTask.value.add(task)
                }) {
                    Icon(imageVector = Icons.Filled.Check, contentDescription =  "Check")
                }
            }
        }
    }
}

@Composable
fun recyclerView(tasks: MutableList<Task>) {
    LazyColumn (modifier =  Modifier.padding(vertical = 10.dp, horizontal = 80.dp)) {
        items(items = tasks) {task ->
            toDoItem(task.title, task.category, task)
        }
    }

}

CodePudding user response：

You are using MutableList<>, which is not recommended for any collection use-cases in Jetpack Compose. I would advice changing it to a SnapshotStateList.

Your recyclerView composable would look like this

@Composable
fun recyclerView(tasks: SnapshotStateList<Task>) { ... }

and somewhere where you set things up (e.g ViewModel) would be like

tasks = mutableStateListOf<Task>( ... )

Using SnapshotStateList will guarantee an "update" or re-composition with any normal list operation you do to it such as,

list.add( <new task> )
list.remove( <selected task> )
list[index] = task.copy() <- idiomatic way of udpating a list

And with a SnapshotStateList used in a LazyColumn, let's say you perform an update, only a specific list item will be re-composed based on the matching index you modified. So if you do something like

taskSnapshotStateList[3] = thirdTask.copy( taskTitle = "This is Home Task Now" )

LazyColumn is smart to only re-compose the item at its third index

There is also SnapshotStateMap which is for Map key~value pair use-case.

But if you are curious as to how you would update your LazyColumn with an ordinary List, you would have to re-create the entire MutableList<Task> so that it will flag the composer that an update is made because the MutableList<Task> now refers to a new reference of collection of tasks.