Sobreposições de elementos da interface com grade

A API Grid do Jetpack Compose foi projetada para layouts de tela estruturais e bidimensionais. Ao contrário das grades preguiçosas, que são otimizadas para grandes conjuntos de dados, Grid permite definir uma estrutura de layout fixa ou responsiva usando faixas (linhas e colunas), lacunas e áreas de grade. Você coloca itens nessa estrutura usando Modifier.gridItem, que oferece controle explícito sobre o posicionamento e a abrangência no contêiner de grade.

Quando a interface exige vários itens na mesma área de grade ou em áreas sobrepostas , como sobreposições de selos, indicadores de status ou cards em camadas, a ambiguidade de coordenadas pode tornar o comportamento do layout imprevisível. Gerenciar a profundidade de componentes sobrepostos sem recorrer a aninhamento Box complexo ou deslocamentos de coordenadas manuais é essencial para manter um código de layout limpo e legível.

Práticas recomendadas

• Ordem de declaração:Grid segue a ordem zIndex padrão com base na ordem de declaração no bloco Grid. Os itens declarados mais tarde no bloco de conteúdo Grid são renderizados sobre os itens declarados anteriormente.
• Controle explícito de z-index: use Modifier.zIndex se precisar controlar ou substituir explicitamente a ordem de desenho padrão de elementos sobrepostos.
• Sobreposições de itens x áreas nomeadas:use Grid e áreas nomeadas para definir a estrutura do layout, mas mantenha a lógica de sobreposição complexa dentro do gridItem específico se essas sobreposições estiverem logicamente vinculadas a essa célula da grade.
• Abrangências intencionais para sobreposições:ao sobrepor, verifique se os parâmetros rowSpan e columnSpan são intencionais para que os elementos sobrepostos controlem a quantidade de conteúdo subjacente que está obscurecido.

Ingredientes

• Grid: um contêiner de layout estrutural e bidimensional
• GridConfigurationScope.area: função de escopo usada para definir regiões nomeadas e áreas de sobreposição em faixas de grade
• Modifier.gridItem: modificador usado para colocar e abranger elementos combináveis em faixas de grade ou em áreas de grade nomeadas
• Modifier.zIndex: modificador usado para controlar explicitamente a ordem de desenho e elevação da camada

Etapas

Configure o layout de grade e as áreas nomeadas, posicione o conteúdo da camada de base nas coordenadas de grade de destino e coloque elementos de sobreposição nas células de grade compartilhadas ou em áreas sobrepostas.

1. Definir a configuração da grade

Crie uma configuração combinável Grid especificando faixas de linha e coluna, bem como áreas nomeadas que abrangem células para definir regiões de sobreposição:

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. Colocar conteúdo de base e declarar sobreposições

Coloque os elementos combináveis de base nas células da grade usando Modifier.gridItem. A Grid segue a ordem zIndex padrão com base na ordem de composição. Portanto, os itens declarados mais tarde no bloco Grid são desenhados sobre os itens anteriores. Ao colocar uma sobreposição na mesma célula ou em uma área sobreposta, declare o elemento combinável de sobreposição após o elemento de base ou referencie uma área nomeada. Você pode usar Modifier.zIndex se precisar controlar ou substituir explicitamente essa ordem de desenho padrão.

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

Os elementos da interface são sobrepostos de maneira previsível na estrutura de grade 2D. Ao usar a ordem de declaração padrão, você evita contêineres aninhados complexos, mantendo um código de layout limpo e responsivo.