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

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)

PS如果您需要将物品做成正方形，只需将盒子再放入一个盒子即可。看起来像width中的项目LazyVerticalGrid被网格覆盖以填充最大宽度，不确定这是一个错误还是一个功能。