How to add and delete items in a lazyVerticalGrid Column in jetpack compose

Question

I'm new to jetpack compose and I am just looking for a way to add and delete items from a lazyVerticalGrid using jetpack compose from a pop-up menu. Nothing complicated, just simple code to make me easily understand what I have to do

Answer 1

This is pretty easy as other LazyLists. You need to have a list that you can trigger recomposition after delete, add or update and use unique keys to not recompose your entire list and limit recomposition to a range of items.

   val list = remember { mutableStateListOf<Snack>() }

You can remove or add inside you menu by changing this list

Adding, removing items or replacing any items with new one, to update you need to pass a new instance of object, will trigger recomposition

@Composable
private fun GridExample() {

    val scrollState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()

    val list = remember { mutableStateListOf<Snack>() }

    Column {
        LazyVerticalGrid(
            contentPadding = PaddingValues(12.dp),
            modifier = Modifier
                .weight(1f)
                .background(backgroundColor),
            columns = GridCells.Fixed(3),
            content = {
                items(items = list,
                    key = { snack: Snack ->
                        snack.name
                    }) { snack: Snack ->
                    GridSnackCard(snack = snack)
                }
            }
        )

        Row(
            modifier = Modifier.padding( 8.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {

            Button(
                modifier = Modifier.weight(1f),
                onClick = {
                    if (list.size < snacks.size) {
                        list.add(snacks[list.size])
                    }
                },
                shape = RoundedCornerShape(8.dp)
            ) {
                Text(text = "Add")
            }
            Spacer(modifier = Modifier.width(10.dp))
            Button(
                modifier = Modifier.weight(1f),
                onClick = {
                    if (list.size > 0) {
                        list.removeLast()
                    }
                },
                shape = RoundedCornerShape(8.dp)
            ) {
                Text(text = "Remove")
            }
        }
    }
}