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

结果

您现在已构建一个简洁的二维比较表格，该表格具有自动列对齐和单元格间距功能。