版面配置容器

Jetpack Compose 提供多個版面配置容器，可協助您建構及排列 UI 元件。雖然 Row 和 Column 等基本版面配置可組合項可處理簡單的排列方式，但隨著螢幕大小變化和使用者資料增加，許多應用程式需要更靈活、更具適應性的容器解決方案。

版面配置容器包括：

  • Lazy 清單和 Lazy 格線：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)

部分 (僅限完整 span)

❌

✅
  • 捲動高度不一的動態饋給項目。

LazyHorizontalGrid

✅

❌

✅

✅
  • 橫向捲動輪轉介面或多列分頁資料。

合併列和欄

❌

❌

❌

❌
  • 簡單的元件組合，例如在圖示旁放置文字標籤。