Kotlin jetpack compose deleting and adding elements to mutableStateListOf-CodePudding

I have wrote hardcoded list of ToDo elements and made 2 composable functions to display data.

@Composable
fun TodoAppContent() {
val todos = remember { (DataProvider.listOfToDoEntries) }
Column(
    modifier = Modifier
        .fillMaxSize()
        .background(Color(0xff503d69))
) {
    LazyColumn(
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
        modifier = Modifier
            .weight(1f)
    ) {
        items(items = todos, itemContent = { CreateToDoListItem(todo = it) })
    }
    Button(
        onClick = {},
        modifier = Modifier
            .size(60.dp)
            .align(alignment = Alignment.CenterHorizontally),
        colors = ButtonDefaults.buttonColors(backgroundColor = Color(0xffc1b6d1)),
        shape = CircleShape
    ) {
        Text(text = " ")
    }
}

}

@Composable
fun CreateToDoListItem(todo: ToDo) {
Card(
    modifier = Modifier
        .padding(horizontal = 8.dp, vertical = 8.dp)
        .fillMaxWidth(),
    elevation = 2.dp,
    backgroundColor = Color(0xff694598),
    shape = RoundedCornerShape(
        topStart = 30.dp,
        topEnd = 30.dp,
        bottomStart = 0.dp,
        bottomEnd = 30.dp
    )
) {
    Row {
        Column(
            modifier = Modifier
                .padding(16.dp)
                .fillMaxWidth()
                .align(Alignment.CenterVertically)
        ) {
            Text(text = todo.title, style = typography.h6)
            Text(text = todo.description, style = typography.caption)
            OutlinedButton(
                onClick = {},
                modifier = Modifier
                    .size(40.dp)
                    .align(alignment = Alignment.End),
                colors = ButtonDefaults.buttonColors(backgroundColor = Color(0xffc1b6d1)),
                shape = CircleShape
            ) {
                Text(text = "X")
            }
        }
    }
}

}

It worked fine but when I wanted implement operations such as adding new entry to list and deleting it by changing

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

I'm no longer recieving single ToDo object but whole list. Any ideas how to recievie every single ToDo object of that mutableStateList?

CodePudding user response：

Using mutableStateListOf you can create a mutable state list from some arguments.

So mutableStateListOf(DataProvider.listOfToDoEntries) will create a mutable list of lists, which is probably not what you want.

If you want to initialize a mutable state list with items from another list, you can use toMutableStateList:

val todos = remember { DataProvider.listOfToDoEntries.toMutableStateList() }