使用 Grid 的界面元素叠加层

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

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

最佳实践

• 声明顺序： Grid 遵循基于 Grid 块内声明顺序的标准 zIndex 排序。在 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

结果

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