我如何 select 在 Jetpack 中只有一个网格？

Question

var iconSize by remember { mutableStateOf(50.dp)}
var boxBorder by remember { mutableStateOf(1.dp)}

LazyVerticalGrid(
            columns = GridCells.Fixed(3),
            content = {

                items(itemList){ item ->

                    var isSelected by remember { mutableStateOf(false)}

                    if(isSelected){
                        iconSize = 70.dp
                        boxBorder = 2.dp
                    }else{
                        iconSize = 50.dp
                        boxBorder = 1.dp
                    }

                    Box(modifier = Modifier
                        .border(boxBorder)
                        .clickable {isSelected = !isSelected}
                    ){
                        Icon(
                            modifier = Modifier
                            .size(iconSize),
                            imageVector = Icons.Default.Settings,
                            contentDescription = null)
                    }
                }
            }
        )

这是我的看法，我只想select其中之一。我不想多个 selection，我想单个 selection。

我怎样才能做到这一点？

Answer 1

当滚动时特定项目的视图从屏幕上消失时，items 内的所有 remember 将被重置。您需要将其移动到容器级别，然后它的生命周期将绑定到 LazyVerticalGrid 本身。

您现在可以存储所选项目而不是布尔值。

var selectedItem by remember { mutableStateOf<Item?>(null) }

LazyVerticalGrid(
    columns = GridCells.Fixed(3),
    content = {
        items(itemList){ item ->

            val isSelected = item == selectedItem

            Modifier.clickable { selectedItem = item }

如果你的itemList是可修改的，最稳定的解决办法是存储选中项的id。如果只能更改项目内容，并且order/number稳定，也可以使用选中项目的索引

我如何 select 在 Jetpack 中只有一个网格？

How can i select only one grid in jetpack compose?

android

kotlin

android-jetpack

android-jetpack-compose