Compose：如何在 LazyVerticalGrid 中拉伸项目高度或创建交错网格？

Question

我用来LazyVerticalGrid创建一个具有 96 dp 列的响应式网格，它看起来像这样：

LazyVerticalGrid(
    columns = GridCells.Adaptive(96.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
) {
    Card {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Card {...}
            Text(title)
        }
    }
}

但存在一个问题：由于文本换行，卡片内容可能具有不同的高度，并且卡片之间存在负空间（用红色箭头标记）。哪些解决方案可以在 Compose 中实现而无需创建自定义布局？

1. 使其他卡的高度等于最大可用高度
2. 像这样制作交错网格：

Answer 1

LazyHorizo​​ntalStaggeredGrid 可能适合您。

val itemsIndexedList = listOf("A", "B", "C")

LazyHorizontalStaggeredGrid(
    rows = StaggeredGridCells.Fixed(3)
) {
    itemsIndexed(itemsIndexedList) { index, item ->
        Text("Item at index $index is $item")
    }
}

欲了解更多详情，请查看下面的链接。 https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/staggeredgrid/package-summary#LazyVerticalStaggeredGrid