如何使用 JetpackCompose 创建 GridLayout？

Question

<androidx.gridlayout.widget.GridLayout>
  ...
</androidx.gridlayout.widget.GridLayout>

在网格布局中，每一列都会自动适应最宽的视图。

在JetpackCompose中，我只能使用：

Column {
  Box{
    Text()
    Text(modifier = Modifier.padding(start = xxxxxx))
  }
  ...
}

有更好的方法吗？

Answer 1

如果您想要一个惰性网格，您可以使用如下所示的惰性网格：此处：

@Composable
fun PhotoGrid(photos: List<Photo>) {
    LazyVerticalGrid(
        columns = GridCells.Adaptive(minSize = 128.dp)
    ) {
        items(photos) { photo ->
            PhotoItem(photo)
        }
    }
}

如果您不希望它 Lazy，您可以在其示例应用程序之一中使用由 Jetpack Compose 团队设计的示例 Grid.kt：

@Composable
fun PhotoGrid(photos: List<Photo>) {
    VerticalGrid(
        columns = 2
    ) {
        photos.forEach { photo ->
            PhotoItem(photo)
        }
    }
}