如何在Jetpack Compose中为网格项添加间距

Question

我目前正在尝试实现一个网格视图，它由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)
            }
        }
    }
} 

以下是我所达到的结果。我无法在项目下方添加空格 :(

- nasibeyyubov

---

你可以在单元格中添加底部/顶部边距。 - Yogesh Choudhary Paliyal

Jetpack Compose 中没有边距。然而，我认为这是因为该 API 仍处于实验阶段。在其不稳定时，请自行实现。 - Richard Onslow Roper

Answer 1

您需要在LazyVerticalGrid组合中设置verticalArrangement和horizontalArrangement属性。

这将在垂直和水平轴上以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)
            }
        }
    }
} 

- Rafsanjani

---

LazyVerticalGrid没有verticalArrangement或者horizontalArrangement。 - Khantahr

@Ralgha 你可以结合单元格填充和网格内容填充来模拟间隔。 - vitidev

@Ralgha 你使用的Compose版本是哪个？LazyVerticalGrid具有用于单元格间距的verticalArrangement和horizontalArrangement。 - Rafsanjani

我正在使用1.0.1版本。 - Khantahr

此答案应被标记为正确答案。 - Vahid

在1.0.5版本中，我没有看到可用的verticalArrangement或horizontalArrangement。但是它们出现在1.1.0-beta04中。 - daniyelp

Answer 2

在这种情况下，你需要的正是padding。但你需要明白，在Compose中，修饰符的顺序非常重要。将background修饰符移动到padding和sizes修饰符之间，就能达到你想要的效果。同时，可点击涟漪的效果也会保持不变。

了解更多有关修饰符顺序的知识，请查看：https://dev59.com/JVIG5IYBdhLWcg3wjhgh#65698101

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

提示：如果你希望你的物品是正方形，则只需再将你的盒子放在一个盒子里，看起来像是在LazyVerticalGrid中的项目的width被网格覆盖以填充最大宽度，不确定这是否是错误还是特性。

- Phil Dukhov

---

没有太多意义。 - Richard Onslow Roper

我之前在一个应用程序中遇到过这个问题。很奇怪。 - Richard Onslow Roper

@MARSK 看看这个答案，它很好地解释了修饰符的工作原理：https://dev59.com/JVIG5IYBdhLWcg3wjhgh#65698101 - Phil Dukhov

设置填充以进行间距调整也会在LazyVerticalGrid的边缘添加额外的空间。 - Vahid

@Philip Dukhov 我的意思是边缘项和中间项之间的间距不相等，因为中间项的空间由两个填充组成，而边缘项只有一个。 - Vahid

@Vahid 我明白你的意思，但如果你将 contentPadding 设为等于 padding，那么间距就会相同。 - Phil Dukhov