创建可滚动网格

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

版本兼容性

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

依赖项

确定网格方向

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

创建可滚动网格

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

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

代码要点

  • 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。

结果

图 1. 使用 LazyHorizontalGrid 的水平可滚动网格。

包含本指南的集合

本指南属于以下精选快速入门集合,这些集合涵盖了更广泛的 Android 开发目标:

借助列表和网格,您的应用可以以视觉上令人愉悦且易于用户使用的形式显示集合。
了解如何使用可组合函数根据 Material Design 设计系统轻松创建美观的界面组件。
本系列视频介绍了各种 Compose API,可让您快速了解可用 API 以及如何使用它们。

有问题或反馈

请访问我们的常见问题解答页面,了解简短指南,或与我们联系,告诉我们您的想法。