如何在 LazyVerticalGrid 中的项目之间显示水平和垂直分隔线？

Question

如何在 LazyVerticalGrid 中的项目之间显示垂直和水平分隔线？

对于 LazyColumn 可以这样做：

LazyColumn(...) {
    items(items) { item ->
        Row(item)
        Divider()
    }
}

它也适用于 LazyVerticalGrid，但我不确定如何在项目之间显示垂直分隔线？

Answer 1

您可以在每个单元格中添加 2 个不同的 Divider。

类似于：

val numbers = (0..20).toList()

LazyVerticalGrid(cells = GridCells.Fixed(4)){
    itemsIndexed(numbers) { index, item ->

        Row(Modifier.height(IntrinsicSize.Min)) {

            Column(Modifier.weight(1f),horizontalAlignment = Alignment.CenterHorizontally) {
                Text(text = "Number")
                Text(text = "  $item",)
                Divider() //Horizontal divider 
            }
            
            //Vertical divider avoiding the last cell in each row
            if ((index+1)%4 != 0) {
                Column() {
                    Divider(
                        color = Color.Red,
                        modifier = Modifier
                            .fillMaxHeight()
                            .width(1.dp)
                    )
                }
            }
        }
    }
}