使用 Grid 的界面元素叠加层

Jetpack Compose Grid API 专为结构化二维屏幕布局而设计。与针对大型数据集进行优化的延迟网格不同，Grid 允许您使用轨道（行和列）、间隙和网格区域定义固定或自适应布局结构。您可以使用 Modifier.gridItem 将项放入此结构中，这样您就可以明确控制网格容器内的定位和跨度。

当界面需要在同一网格区域或重叠区域中放置多个项（例如叠加徽章、状态指示器或分层卡片）时，坐标歧义可能会导致布局行为不可预测。管理重叠组件的深度，而无需借助复杂的 Box 嵌套或手动坐标偏移，这对于保持布局代码简洁易读至关重要。

最佳做法

• 声明顺序： Grid 遵循标准 zIndex 排序，具体取决于 Grid 块内的声明顺序。在 Grid 内容块中较晚声明的内容项会呈现在较早声明的内容项之上。
• 显式 z-index 控制：如果您需要显式控制或替换重叠元素的默认绘制顺序，请使用 Modifier.zIndex。
• 命名区域与项叠加层：使用 Grid 和命名区域来定义布局结构，但如果这些叠加层在逻辑上与该网格单元格相关联，请将复杂的叠加层逻辑保留在特定的 gridItem 中。
• 叠加层的有意跨度：叠加时，请确保 rowSpan 和 columnSpan 参数有意针对重叠元素，以控制底层内容被遮挡的程度。

所需要素

• Grid：结构化的二维布局容器
• GridConfigurationScope.area：用于定义命名区域和跨网格轨道叠加区域的作用域函数
• Modifier.gridItem：用于在网格轨道上或命名网格区域中放置和跨越可组合项的修饰符
• Modifier.zIndex：用于明确控制绘制和图层高度顺序的修饰符

步骤

配置网格布局和命名区域，将基础层内容放置在目标网格坐标内，并将叠加元素放置在共享网格单元或重叠区域中。

1. 定义网格配置

创建一个 Grid 可组合项配置，指定行和列轨道，以及跨单元格的命名区域，以定义叠加区域：

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

2. 放置基础内容并声明叠加层

使用 Modifier.gridItem 将基础可组合项放置在网格单元中。Grid 会根据组合顺序遵循标准 zIndex 顺序，因此在 Grid 代码块中较晚声明的项会绘制在较早声明的项之上。在同一单元格或重叠区域中放置叠加层时，请在基础元素之后声明叠加层可组合项，或引用命名区域。如果您需要明确控制或替换此默认绘制顺序，可以使用 Modifier.zIndex。

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

结果

界面元素在二维网格结构中以可预测的方式叠加。通过依赖标准声明顺序，您可以避免复杂的嵌套容器，同时保持简洁、自适应的布局代码。