建立可捲動的格線

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

版本相容性

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

依附元件

決定格線方向

LazyHorizontalGridLazyVerticalGrid 可組合函式支援在格線中顯示項目。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)
        }
    }
}

程式碼的重點

  • 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 的欄。

結果

圖 1. 使用 LazyHorizontalGrid 的水平可捲動格線。

包含此指南的集合

本指南是精選的快速指南系列之一,涵蓋更廣泛的 Android 開發目標:

清單和格線可讓應用程式以視覺上賞心悅目且使用者易於取用的形式顯示集合。
瞭解可組合函式如何讓您輕鬆根據 Material Design 設計系統,建立美觀的 UI 元件。
本系列影片將介紹各種 Compose API,快速向您展示可用的 API 和使用方式。

有問題或意見回饋嗎?

歡迎前往常見問題頁面,瞭解快速指南或與我們聯絡,分享您的想法。