网格表格布局

四星评级图标

此方案展示了与传统的嵌套结构相比，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 实现比较表格

创建一个使用 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 的比较表。

其他资源