Question

我目前正在尝试实现一个 gridview，它由 2 列组成。我知道我可以使用列和行来实现我自己的网格视图，但我只想使用现有的方法，尽管它是实验性的。

@Composable
fun MyGridScreen() {
    LazyVerticalGrid(cells = GridCells.Fixed(2), modifier = Modifier.fillMaxSize(),contentPadding = PaddingValues(12.dp)) {
        items(15) {
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .padding(10.dp)
                    .height(80.dp)
                    .background(Color.Red)
                    .aspectRatio(1f)

            ) {
                Text("Grid item $it", color = Color.White)
            }
        }
    }
}

以下是我取得的结果。我不能在项目下方放置空间:(

Answer 1

您需要在 verticalArrangement 可组合对象上设置 horizontalArrangement 和 LazyVerticalGrid 属性。

这将使项目在垂直和水平轴上间隔 10.dp。

 @Composable
    fun MyGridScreen() {
        LazyVerticalGrid(cells = GridCells.Fixed(2), modifier = Modifier.fillMaxSize(),contentPadding = PaddingValues(12.dp), verticalArrangement = Arrangement.spacedBy(10.dp), horizontalArrangement = Arrangement.spacedBy(10.dp) {
        items(15) {
            Box(
                contentAlignment = Alignment.Center,
                modifier = Modifier
                    .padding(10.dp)
                    .height(80.dp)
                    .background(Color.Red)
                    .aspectRatio(1f)

            ) {
                Text("Grid item $it", color = Color.White)
            }
        }
    }
}

Answer 2

在这种情况下，填充正是您所需要的。但是你需要明白在撰写修饰符中的顺序意味着很多。通过在填充和大小修饰符之间移动 background 修饰符，您将获得所需的内容。可点击的涟漪效果也一样。

查看更多修饰符顺序的工作原理：https://stackoverflow.com/a/65698101/3585796

.padding(10.dp)
.background(Color.Red)
.height(80.dp)
.aspectRatio(1f)

附言如果你需要你的物品是一个正方形，只需将你的盒子再放在一个盒子里。看起来 width 中的 LazyVerticalGrid 项被网格覆盖以填充最大宽度，不确定这是错误还是功能。

如何在jetpack compose中的网格项目之间添加空间

2 个答案: