网格

Grid 是一种 Jetpack Compose API,可让您灵活地实现二维布局。借助此 API,您可以采用多列或多行布局显示商品,这些布局会根据可用的容器尺寸进行调整。

使用网格实现的灵活自适应二维布局
图 1.一种灵活且自适应的二维布局,具有 Grid

Grid 与类似的 composable 有何不同?

Compose 已经提供了类似的组件,例如 LazyVerticalGrid。这些组件主要用于直观呈现大型同类数据集,例如在在线影音应用中显示内容目录。这些组件并非用于屏幕或复杂组件的结构布局。

您还可以通过组合多个 RowColumn 可组合项来实现二维布局。不过,这种方法存在一些缺点,例如层次结构较深且难以适应。

下表简要介绍了哪些布局适合每种 API:

组件 用途
LazyVerticalGridLazyStaggeredGridLazyHorizontalGrid 需要延迟加载的大型同类数据集的可视化。
RowColumnFlexBox 一维布局
Grid 二维布局

术语

请熟悉以下术语,以便了解 Grid 的运作方式。

网格线

网格由水平线和垂直线组成。 如果网格有三行,则有四条水平线,包括最后一行之后的水平线。 在下图中,每条虚线都表示一条网格线:

网格由四条水平线和三条竖直线组成。
图 2。 网格由四条水平线和三条竖直线组成。

网格轨道

网格轨道是两条网格线之间的空间。 行轨道位于两条水平线之间,列轨道位于两条竖线之间。如需定义这些轨道的大小,请在创建网格时为其分配大小。

第一行的网格轨道。
图 3。 第一行的网格轨道。

网格单元

网格单元格是行轨道和列轨道的交集。

位于第二行和第二列交叉处的网格单元格。
图 4。 位于第二行和第二列交叉处的网格单元格。

网格区域

网格区域由多个网格单元组成。您可以通过使某个项目跨越多个轨道来定义网格区域。

包含四个网格单元格的网格区域。
图 5。 包含四个网格单元格的网格区域。

网格间距

网格间距是指网格轨道之间的间距。 您无法将界面元素放置在间隙中,但可以使界面元素跨越间隙。

第一列和第二列之间的网格间距。
图 6。 第一列和第二列之间的网格间距。