如何使用 JetpackCompose 创建 GridLayout？

Question

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

In the grid layout, each column will automatically adapt to the widest view.

In JetpackCompose, I can only use:

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

Is there a better way?

Answer 1

If you want a Lazy Grid, you can use the Lazy Grids as shown here :

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

If you don't want it Lazy, you can use the sample Grid.kt designed by the Jetpack Compose team in one of their sample apps:

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