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

Posted 2023-02-24

【中文标题】如何在jetpack compose中的网格项目之间添加空格

【英文标题】：how to add space between grid items in jetpack compose

【发布时间】：2021-08-01 12:19:59

【问题描述】：

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

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

【问题讨论】：

您可以在单元格中添加边距底部/顶部

Jetpack compose 中没有边距。但是我认为这是因为 API 仍然是实验性的。在不稳定时实现自己的

【参考方案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)
            
        
    
 

【讨论】：

LazyVerticalGrid 没有verticalArrangement 或horizontalArrangement。

@Ralgha 您可以结合单元格填充 + 网格 contentPadding 进行 spacedBy 仿真

@Ralgha 您使用的是什么版本的 compose？ LazyVerticalGrid 有 verticalArrangement 和 horizontalArrangement 用于单元格间距

我使用的是 1.0.1。

在1.0.5 中我看不到verticalArrangement 或horizontalArrangement 可用。但它们出现在1.1.0-beta04 中。

【参考方案2】：

在这种情况下，填充正是您所需要的。但是您需要了解，在 compose 修饰符中，顺序意义重大。通过在填充和大小修饰符之间移动background 修饰符，您将获得所需的内容。并且可点击的涟漪也会起作用。

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

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

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

【讨论】：

没有多大意义

我以前在应用程序中遇到过这个问题。奇怪

@MARSK 查看这个答案，它很好地解释了修饰符是如何工作的：***.com/a/65698101/3585796

为间距设置 padding 也会增加额外的空间哦 LazyVerticalGrid 的边缘

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