Superposiciones de elementos de la IU con cuadrícula

La API de Grid de Jetpack Compose está diseñada para diseños de pantalla estructurales y bidimensionales. A diferencia de las cuadrículas diferidas, que están optimizadas para conjuntos de datos grandes, Grid te permite definir una estructura de diseño fija o responsiva con pistas (filas y columnas), espacios y áreas de cuadrícula. Para colocar elementos en esta estructura, usa Modifier.gridItem, que te brinda control explícito sobre el posicionamiento y el alcance dentro del contenedor de la cuadrícula.

Cuando tu IU requiere varios elementos en la misma área de la cuadrícula o en áreas superpuestas , como superposiciones de insignias, indicadores de estado o tarjetas en capas, la ambigüedad de las coordenadas puede hacer que el comportamiento del diseño sea impredecible. Administrar la profundidad de los componentes superpuestos sin recurrir a la anidación compleja de Box ni a los desplazamientos manuales de coordenadas es esencial para mantener un código de diseño legible y claro.

Prácticas recomendadas

• Orden de declaración: Grid sigue el orden estándar de zIndex según el orden de declaración dentro del bloque Grid. Los elementos declarados más adelante en el bloque de contenido Grid se renderizan sobre los elementos declarados anteriormente.
• Control explícito de z-index: Usa Modifier.zIndex si necesitas controlar o anular de forma explícita el orden de dibujo predeterminado de los elementos superpuestos.
• Área con nombre en comparación con superposiciones de elementos: Usa Grid y áreas con nombre para definir la estructura de tu diseño, pero mantén la lógica de superposición compleja dentro del gridItem específico si esas superposiciones están vinculadas lógicamente a esa celda de la cuadrícula.
• Alcances intencionales para superposiciones: Cuando superpongas, asegúrate de que los parámetros rowSpan y columnSpan sean intencionales para que los elementos superpuestos controlen cuánto se oculta del contenido subyacente.

Ingredientes

• Grid: Un contenedor de diseño estructural y bidimensional
• GridConfigurationScope.area: Función de alcance que se usa para definir regiones con nombre y áreas de superposición en las pistas de la cuadrícula
• Modifier.gridItem: Modificador que se usa para colocar y abarcar elementos componibles en las pistas de la cuadrícula o en áreas de cuadrícula con nombre
• Modifier.zIndex: Modificador que se usa para controlar de forma explícita el orden de dibujo y elevación de capas

Pasos

Configura el diseño de la cuadrícula y las áreas con nombre, coloca el contenido de la capa base dentro de las coordenadas de la cuadrícula de destino y coloca los elementos de superposición en las celdas de la cuadrícula compartidas o en las áreas superpuestas.

1. Define la configuración de la cuadrícula

Crea una configuración de elementos componibles Grid que especifique las pistas de filas y columnas, así como las áreas con nombre que abarcan las celdas para definir las regiones de superposición:

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. Coloca el contenido base y declara las superposiciones

Coloca tus elementos componibles base en las celdas de la cuadrícula con Modifier.gridItem. Grid sigue el orden estándar de zIndex según el orden de composición, por lo que los elementos declarados más adelante dentro del bloque Grid se dibujan sobre los elementos anteriores. Cuando coloques una superposición en la misma celda o en un área superpuesta, declara el elemento componible de superposición después del elemento base o haz referencia a un área con nombre. Puedes usar Modifier.zIndex si necesitas controlar o anular de forma explícita este orden de dibujo predeterminado.

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

Resultados

Los elementos de la IU se superponen de forma predecible dentro de la estructura de la cuadrícula 2D. Si usas el orden de declaración estándar, evitas los contenedores anidados complejos y mantienes un código de diseño legible y responsivo.