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

Question

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

@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)
            }
        }
    }
}