本頁面由 Cloud Translation API 翻譯而成。

建立可捲動的格線

您可以使用延遲格線管理大型資料集和動態內容，藉此提升應用程式效能。您可以使用 Lazy 格線可組合項，在橫跨多欄或多列的捲動式容器中顯示項目。

版本相容性

這個實作方式需要將專案 minSDK 設為 API 級別 21 以上。

依附元件

決定格線方向

LazyHorizontalGrid 和 LazyVerticalGrid 可組合函式支援在格線中顯示項目。Lazy 垂直格線會在橫跨多欄的垂直捲動式容器中顯示項目，而 Lazy 水平格線在水平軸上也會如此。

建立可捲動的格線

以下程式碼會建立包含三個欄的水平捲動格狀檢視畫面：

@Composable
fun ScrollingGrid() {
    val itemsList = (0..15).toList()

    val itemModifier = Modifier
        .border(1.dp, Color.Blue)
        .width(80.dp)
        .wrapContentSize()

    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(itemsList) {
            Text("Item is $it", itemModifier)
        }

        item {
            Text("Single item", itemModifier)
        }
    }
}LazyListSnippets.kt

程式碼的重點

LazyHorizontalGrid 可組合函式會決定格線的水平方向。
- 如要建立垂直格線，請改用 LazyVerticalGrid。
rows 屬性會指定如何排列格線內容。
- 針對垂直格線，請使用 columns 屬性指定排列方式。
items(itemsList) 會將 itemsList 新增至 LazyHorizontalGrid。lambda 會為每個項目算繪 Text 可組合函式，並將文字設為項目說明。
item() 會將單一項目新增至 LazyHorizontalGrid，而 lambda 會以與 items() 類似的方式轉譯單一 Text 可組合函式。
GridCells.Fixed 定義列數或欄數。
如要建立盡可能多列的格線，請使用 GridCells.Adaptive 設定列數。

在以下程式碼中，20.dp 值會指定每個欄的寬度至少為 20.dp，且所有欄的寬度都相同。如果螢幕寬度為 88.dp，則有 4 個 22.dp 的欄。