格線中的延遲清單

四星級評等圖示

Grid 可組合函式會建立結構化的二維畫面版面配置。Grid 使用明確定義的軌道 (列和欄) 和間隙，定義回應式版面配置結構，做為 UI 的基礎架構。

由於 Grid 是結構性容器，而非延遲載入容器，因此您必須明確定義其中放置的每個元素，而不會在捲動時回收項目。因此，直接在 Grid 中算繪大型或動態資料集，可能會導致效能瓶頸，因為所有項目會同時組成。

如要在結構化畫面版面配置中顯示大量資料，請在 Grid 儲存格中嵌入延遲元件，例如 LazyColumn 或 LazyRow。但請注意：彈性軌道 (具有 1.fr 等規格) 會查詢子項元素的內建大小。由於 SubcomposeLayout 不支援內建測量傳遞，因此將 Lazy 清單放在彈性軌道內會導致 IllegalStateException 異常終止。如要安全地將 Lazy 清單放在彈性網格軌道中，您必須使用 GridTrackSize.MinMax 大小 (例如 minmax(0.dp, 1.fr))，略過內建測量階段。

螢幕版面配置，頂端有標頭，主要內容區域有可捲動的項目清單，底部有頁尾。
圖 1. 結構化畫面版面配置，包含標頭、頁尾和用於內容的嵌入式 LazyColumn。

最佳做法

  • 使用延遲清單，而非大型明確迴圈：如要在結構化 Grid 中顯示大型或動態資料集，請在特定格線儲存格中嵌入延遲元件 (通常是 LazyColumn 或 LazyRow)，而非在項目上建立大型明確迴圈，因為 Grid 不會回收項目，且限制為 1000 個軌道。
  • 對 Lazy 清單使用 MinMax 軌道大小調整：由於 LazyColumn 和 LazyRow 不支援內建測量傳遞 (請參閱 SubcomposeLayout)，請在託管 Lazy 元件的彈性軌道上使用 GridTrackSize.MinMax，安全地略過內建測量。

要件

  • Grid：可組合版面配置，可將項目放置在 2D 格線結構中，並使用明確的列和欄軌跡進行設定。
  • LazyColumn：垂直捲動清單，只會組合及回收目前在畫面上顯示的項目。
  • GridTrackSize.MinMax：追蹤大小屬性，定義彈性邊界 (min 和 max)，安全地託管延遲元件，不會觸發執行階段測量當機。
  • gridItem：Compose Modifier 擴充功能，可將子 UI 元素指派給 Grid 內的特定儲存格或命名區域。

步驟

定義語意區域 ID、使用 minmax 大小設定格線軌跡，確保與 Lazy 清單相容，並在格線內容區域中嵌入 LazyColumn，藉此建構畫面版面配置。

1. 設定格線軌跡和命名區域

建立 enum 類別來代表螢幕版面配置的不同區域，並為版面配置軌道和命名區域定義 GridConfigurationScope lambda。請使用 GridTrackSize.MaxContent 讓頁首和頁尾列符合其內容尺寸，並使用 minmax(0.dp, 1.fr) 讓託管 Lazy 清單的內容軌道分配彈性空間，而不查詢不支援的內建測量：

enum class ScreenArea {
    Header,
    Content,
    Footer
}


val lazyConfig: GridConfigurationScope.() -> Unit = {
    column(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)
    row(minmax(0.dp, 1.fr))
    row(GridTrackSize.MaxContent)

    area(ScreenArea.Header, row = 1, column = 1)
    area(ScreenArea.Content, row = 2, column = 1)
    area(ScreenArea.Footer, row = 3, column = 1)
    gap(8.dp)
}

2. 在格線中放置靜態元件

在可組合函式中，將 lazyConfig 傳遞至 Grid 容器。在 content lambda 中，放置靜態元件 (Header 和 Footer)，並使用 Modifier.gridItem() 搭配各自的區域 ID 進行定位。

3. 在內容區域中嵌入 LazyColumn

在內容儲存格中，使用 Modifier.gridItem(ScreenArea.Content) 嵌入 LazyColumn。由於內容軌道在步驟 1 中已設定 minmax(0.dp, 1.fr)，因此 LazyColumn 可以在捲動時安全地測量及回收項目，而無需查詢不支援的固有維度：

@Composable
fun GridWithLazyColumn(
    modifier: Modifier = Modifier,
    items: List<String> = emptyList(),
) {
    Grid(
        modifier = modifier.fillMaxSize(),
        config = lazyConfig
    ) {
        Text("Header", Modifier.gridItem(ScreenArea.Header).padding(16.dp))
        Text("Footer", Modifier.gridItem(ScreenArea.Footer).padding(16.dp))

        // LazyColumn placed in the content area for large datasets
        LazyColumn(
            modifier = Modifier
                .gridItem(ScreenArea.Content)
                .fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(items) { item ->
                Text(item, Modifier.padding(16.dp))
            }
        }
    }
}

結果

您的畫面版面配置現在會使用 Grid API 定義整體的二維頁面結構，同時在具有 minmax 大小的彈性軌道中嵌入 LazyColumn，以便有效回收清單項目，並避免執行階段例外狀況。

其他資源