Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

网格表格布局

此方案展示了与传统的嵌套结构相比，Grid API 如何提高代码可读性。通过配置自动调整大小的轨道，您可以创建一个网格，该网格可根据文本可组合项的固有大小动态适应单元格的宽度和高度。

在此方案中，您将使用 Grid API 构建一个表。

**表 1.** `FlexBox` 和 `Grid` API 的功能比较
	布局	延迟加载	软换行	动态布局更新
`FlexBox`	1 天	否	是	是
`Grid`	2D	否	否	是

最佳做法

使用 Grid 可组合项可提高表格的可读性和可维护性。Grid 可让您精确控制所有行的列尺寸和对齐方式，而无需手动同步宽度。

所需要素

Grid：一种可组合布局，用于将内容项放置在二维网格中。布局配置在 config lambda 参数中指定，而界面内容项在 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 实现对比表

创建一个 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")
    }
}GridByExamples.kt

结果

现在，您已构建了一个干净整洁的二维对比表格，其中包含自动列对齐和单元格间距。