布局容器

Jetpack Compose 提供了多个布局容器,可帮助您构建和排列界面组件。虽然 Row 和 Column 等基本布局可组合项可以处理简单的排列,但随着屏幕尺寸的变化和用户数据的增长,许多应用需要更具自适应性的容器解决方案。

布局容器包括:

  • 延迟列表和延迟网格:LazyColumn、LazyRow 和 LazyVerticalGrid 等组件,仅通过组合和布局当前在视口中可见的项,高效显示大型或动态大小的数据集。
  • 分页器:HorizontalPager 和 VerticalPager 等容器,可让用户在内容页面之间滑动或滚动。
  • 流式布局:自适应一维容器(FlowRow 和 FlowColumn),当空间不足时,会自动将溢出的项换行或换列。
  • 网格:一种灵活的二维结构,可在多列或多行布局中显示内容,并根据容器大小进行调整。
  • FlexBox:一种受 CSS Flexbox 启发的自适应容器,可让您精细控制内容如何沿主轴和交叉轴换行、放大、缩小和对齐,以填充可用空间。

选择正确的布局容器

在 Compose 中构建布局时,选择基本布局容器还是更高级的布局容器取决于您的设计、空间受限时内容项是否必须换行,以及内容项如何动态调整大小。

下表总结了每个 Compose 1D 布局容器的功能:

容器

将内容换行显示

逐项增长

单件商品损耗

单件商品初始尺寸

内容会放大以填充多行中的可用空间

重新排列内容

延迟加载

适用场景:

行 / 列

❌

✅(通过 weight)仅限单行

❌

❌

❌

❌

❌

  • 包含少量固定数量内容的统一行。内容项适合在可用边界内显示,无需换行。

FlowRow / FlowColumn

✅

受限

❌

❌

部分

❌

❌

  • 已被 FlexBox 取代。

LazyRow / LazyColumn

❌

❌

❌

❌

❌

❌

✅

  • 长列表或无限列表,其中只需渲染可见项即可优化性能。
  • 沿单一方向滚动的动态或大型数据集。

FlexBox

✅

✅

✅

✅

✅

✅

❌

  • 需要自适应功能的布局,例如指定初始大小、动态项增长/缩减 (grow/shrink)、视觉重新排序 (order) 或项级交叉轴对齐 (alignSelf)。
  • 排列大小不一的内容。

下表总结了 Grid 和其他类似可组合项的功能:

容器

严格 2D 匹配

项跨度(列)

项目跨度(行)

延迟加载

适用场景:

网格

✅

✅(通过 GridArea)

✅

❌

  • 结构化二维布局,其中所有内容都在屏幕上,并且需要明确的水平和垂直对齐。
  • 跨屏幕尺寸自适应重构布局。

LazyVerticalGrid

✅

✅(通过 span)

❌

✅

  • 垂直滚动式信息流和需要列的大型目录。

LazyStaggeredGrid

❌(仅限 1D)

部分(仅限全跨度)

❌

✅

  • 滚动浏览包含不同高度内容的 Feed。

LazyHorizontalGrid

✅

❌

✅

✅

  • 横向滚动轮播界面或多行分页数据。

合并行和列

❌

❌

❌

❌

  • 简单的组件组装,例如在图标旁边放置文本标签。