格狀表格版面配置

四星級評等圖示

這份食譜說明 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. 使用格線導入比較表

建立 TableInGrid 可組合函式，並使用 Grid 排列資料表項目。在 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 的比較表。

其他資源