How can I select only 3 element in a grid/list (jetpack compose)?-CodePudding

I have a Grid with two columns and 6 elements, but I need that the user select only 3 elements

In the first @Composable I put the value in this way:

    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
    ) {
        items(list.values.size) {
            InterestsItems(
                value = list.values[it].text,
            )
        }
    }

And the second @Composable(InterestsItems) is a Box with an Image inside. I put the value like this:

var isSelected by remember { mutableStateOf(false) }
Box(modifier = Modifier.noRippleClickable { isSelected = !isSelected })

The result is that I select all the elements, is not what I want.

CodePudding user response：

You are apparently using a common isSelected variable for all the items. If you use a loop to render the items, move the variable declaration inside the loop.

CodePudding user response：

Put the isSelected variable inside the items block.

Example;

val list = remember { mutableStateOf(listOf("0","1","2","3","4","5") )}
LazyVerticalGrid(
    columns = GridCells.Fixed(2),
) {
    items(list.value.size){
        var isSelected by remember { mutableStateOf(false) }
        Text(
            modifier = Modifier.clickable{
                isSelected = !isSelected
            },
            text = list.value[it],
            color = if (isSelected) Color.Red else Color.Black
        )
    }
}

Result;