此页面由 Cloud Translation API 翻译。

创建可滚动网格

您可以使用延迟网格管理大型数据集和动态内容，从而提升应用性能。借助延迟网格可组合项，您可以在可滚动容器中跨多个列或行显示项。

版本兼容性

此实现要求将项目 minSDK 设置为 API 级别 21 或更高级别。

依赖项

确定网格方向

LazyHorizontalGrid 和 LazyVerticalGrid 可组合项支持在网格中显示列表项。延迟垂直网格会在可垂直滚动容器中跨多个列显示其列表项，而延迟水平网格则会在水平轴上实现相同的行为。

创建可滚动网格

以下代码会创建一个包含三列的水平滚动网格：

@Composable
fun ScrollingGrid() {
    val itemsList = (0..15).toList()

    val itemModifier = Modifier
        .border(1.dp, Color.Blue)
        .width(80.dp)
        .wrapContentSize()

    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(itemsList) {
            Text("Item is $it", itemModifier)
        }

        item {
            Text("Single item", itemModifier)
        }
    }
}LazyListSnippets.kt

代码要点

LazyHorizontalGrid 可组合项决定了网格的横向方向。
- 如需创建垂直网格，请改用 LazyVerticalGrid。
rows 属性用于指定网格内容的排列方式。
- 对于垂直网格，请使用 columns 属性指定排列方式。
items(itemsList) 会将 itemsList 添加到 LazyHorizontalGrid。lambda 会为每个项呈现一个 Text 可组合项，并将文本设置为项说明。
item() 会向 LazyHorizontalGrid 添加单个项，而 lambda 会以与 items() 类似的方式渲染单个 Text 可组合项。
GridCells.Fixed 用于定义行数或列数。
如需创建包含尽可能多行的网格，请使用 GridCells.Adaptive 设置行数。

在以下代码中，20.dp 值指定每列至少为 20dp，并且所有列的宽度都相同。如果屏幕宽度为 88dp，则有 4 列，每列 22dp。