Grid 是一项 Jetpack Compose API,可让您灵活实现二维布局。
借助此 API,您可以在多列或多行布局中显示项,这些布局会根据可用的容器大小进行调整。
Grid 实现的灵活自适应二维布局。
Grid 与类似的可组合项有何不同?
Compose 已经提供了类似的组件,例如 LazyVerticalGrid.
这些组件主要用于可视化大型同质数据集,例如在在线影音应用中显示内容目录。这些组件并非用于屏幕或复杂组件的结构布局。
您还可以通过组合多个 Row 和 Column 可组合项来实现二维布局。
不过,这种方法存在一些缺点,例如层次结构较深且难以适应。
下表简要介绍了哪些布局适合每项 API:
| 组件 | 用途 |
|---|---|
LazyVerticalGrid、LazyStaggeredGrid、LazyHorizontalGrid |
可视化需要延迟加载的大型同质数据集。 |
Row、Column、FlexBox |
一维布局 |
Grid |
二维布局 |
术语
请熟悉以下术语,以了解 Grid 的工作原理。
网格线
网格由水平和垂直的线条组成。 如果您的网格有三行,则有四条水平线,包括最后一行之后的水平线。 在下图中,每条虚线代表一条网格线:
网格轨道
网格轨道是两条网格线之间的空间。行轨道位于两条水平线之间,列轨道位于两条垂直线之间。如需定义这些轨道的大小,请在创建网格时为其分配大小。
网格单元
网格单元是行轨道和列轨道的交集。
网格区域
网格区域由多个网格单元组成。 您可以通过使项跨越多个轨道来定义网格区域。
网格间距
网格间距是网格轨道之间的间距。 您无法将界面元素放置在间距中,但可以让界面元素跨越间距。