格線

注意： Grid 是實驗性 API，可能會變更。如有任何問題，請透過 Issue Tracker 回報。

Grid 是 Jetpack Compose API，可讓您彈性實作二維版面配置。透過這個 API，您可以在多欄或多列版面配置中顯示項目，並根據可用容器大小調整。

圖 1. 彈性且可調整的二維版面配置，具有 Grid。

Grid 與類似的可組合函式有何不同？

Compose 已提供類似的元件，例如 LazyVerticalGrid。這些元件主要用於顯示大型同質資料集，例如在影片串流應用程式中顯示內容目錄。這些元件並非用於螢幕或複雜元件的結構化版面配置。

您也可以結合多個 Row 和 Column 可組合函式，實作二維版面配置。不過，這種做法也有一些缺點，例如階層較深，且難以適應。

下表概略說明各項 API 適用的版面配置：

元件	目的
LazyVerticalGrid、LazyStaggeredGrid、LazyHorizontalGrid	需要延遲載入的大型同質資料集視覺化。
Row、Column、FlexBox	一維版面配置
Grid	二維版面配置

注意： Grid 不支援延遲載入。

術語

請先熟悉下列術語，瞭解 Grid 的運作方式。

格線

格線是由水平和垂直線條組成。如果格線有三列，就會有四條水平線，包括最後一列之後的線條。在下圖中，每條虛線代表格線：

圖 2。 格線由四條水平線和三條垂直線組成。

格線軌

格線軌是指兩條格線之間的空間。列軌介於兩條水平線之間，欄軌則介於兩條垂直線之間。如要定義這些軌的大小，請在建立格線時為其指派大小。

圖 3。 第一列的格線軌。

網格

格線儲存格是列和欄軌的交集。

圖 4。 第二列和第二欄的儲存格交集處。

格線區域

格線區域由數個格線儲存格組成。 您可以讓項目跨越多個軌道，藉此定義格線區域。

圖 5。 由四個格線儲存格組成的格線區域。

格線間距

格線間距是指格線軌道之間的溝槽。您無法將 UI 元素放入間隙，但可以跨越間隙。

圖 6。 第一欄和第二欄之間的格線間距。