格狀表格版面配置

四星評等圖示

本食譜說明與傳統巢狀結構相比，Grid API 如何提升程式碼可讀性。設定自動調整大小的軌道，即可建立動態調整儲存格寬度和高度的格線，並根據文字可組合項目的內建大小進行調整。

在本食譜中，您將使用 Grid API 建構資料表。

表 1. FlexBox 和 Grid API 的功能比較
版面配置 延遲載入 軟換行 動態版面配置更新
FlexBox 1 天 否 是 是
Grid 2D 否 否 是

最佳做法

使用 Grid 可組合函式，提升表格的可讀性和可維護性。Grid 可讓您精確控制所有資料列的欄位尺寸和對齊方式，不必手動同步寬度。

要件

  • Grid：可組合的版面配置，可將項目放置在二維格線中。版面配置設定是在 config lambda 參數內指定，而 UI 內容項目則是在 content lambda 參數內宣告。
  • GridTrackSize.Auto：根據內容的內在大小，在格線設定中指定自動軌道大小，例如 column(GridTrackSize.Auto) 和 row(GridTrackSize.Auto)。
  • gap()：設定 GridConfigurationScope 內的列和欄間距，例如 gap(row = 8.dp, column = 16.dp)。

步驟

使用單一 Grid 版面配置建立多欄比較表，並為所有項目自動對齊欄位和追蹤大小。

1. 計算格線列和欄，判斷軌道大小

首先，請計算欄和列，以決定軌的大小：

  • 欄：要比較的屬性數量，加上一個項目名稱欄。
  • 資料列：要比較的項目數量，加上一個標題列。

如要比較兩個元件 (FlexBox 和 Grid) 的四個屬性，您需要五欄三列。

2. 使用 Grid 實作比較表

建立使用 Grid 配置資料表項目的 TableInGrid 可組合函式。在 config lambda 中呼叫 column 和 row 函式，定義軌道大小，並使用 gap() 設定儲存格間距。由於文字具有內建大小，GridTrackSize.Auto 會自動調整欄和列的大小，以配合內容。

在 content lambda 中，放置資料表標題和資料。Grid 會自動處理所有儲存格的放置位置和對齊方式：

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}

結果

您現在已建構出整齊的二維比較表，並自動對齊資料欄和間距。

圖 1. 使用 Grid 的比較表。

其他資源