Overlay degli elementi UI con la griglia

L'API Grid di Jetpack Compose è progettata per layout di schermate strutturali bidimensionali. A differenza delle griglie pigre, ottimizzate per set di dati di grandi dimensioni, Grid consente di definire una struttura di layout fissa o reattiva utilizzando tracce (righe e colonne), spazi e aree della griglia. Inserisci gli elementi in questa struttura utilizzando Modifier.gridItem, che ti offre un controllo esplicito sul posizionamento e sullo spanning all'interno del contenitore della griglia.

Quando l'UI richiede più elementi nella stessa area della griglia o in aree sovrapposte , ad esempio badge, indicatori di stato o schede a livelli, l'ambiguità delle coordinate può rendere imprevedibile il comportamento del layout. La gestione della profondità dei componenti sovrapposti senza ricorrere a nidificazioni complesse di Box o a offset di coordinate manuali è essenziale per mantenere un codice di layout pulito e leggibile.

Best practice

• Ordine di dichiarazione: Grid segue l'ordine zIndex standard in base all'ordine di dichiarazione all'interno del blocco Grid. Gli elementi dichiarati in un secondo momento nel blocco di contenuti Grid vengono visualizzati sopra gli elementi dichiarati in precedenza.
• Controllo esplicito di z-index: utilizza Modifier.zIndex se devi controllare o sostituire esplicitamente l'ordine di disegno predefinito degli elementi sovrapposti.
• Area denominata rispetto alle sovrapposizioni di elementi: utilizza Grid e le aree denominate per definire la struttura del layout, ma mantieni la logica di sovrapposizione complessa all'interno di gridItem specifico se queste sovrapposizioni sono logicamente collegate alla cella della griglia.
• Spanning intenzionali per le sovrapposizioni: quando esegui la sovrapposizione, assicurati che i parametri rowSpan e columnSpan siano intenzionali per gli elementi sovrapposti in modo da controllare la quantità di contenuti sottostanti oscurati.

Ingredienti

• Grid: un contenitore di layout strutturale bidimensionale
• GridConfigurationScope.area: funzionalità ambito utilizzata per definire regioni denominate e aree di sovrapposizione nelle tracce della griglia
• Modifier.gridItem: modificatore utilizzato per posizionare e estendere i componibili nelle tracce della griglia o nelle aree della griglia denominate
• Modifier.zIndex: modificatore utilizzato per controllare esplicitamente l'ordine di disegno e di elevazione dei livelli

Passaggi

Configura il layout della griglia e le aree denominate, posiziona i contenuti del livello di base all'interno delle coordinate della griglia di destinazione e inserisci gli elementi di sovrapposizione nelle celle della griglia condivise o nelle aree sovrapposte.

1. Definisci la configurazione della griglia

Crea una configurazione componibile Grid specificando le tracce di righe e colonne, nonché le aree denominate che si estendono tra le celle per definire le regioni di sovrapposizione:

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. Inserisci i contenuti di base e dichiara le sovrapposizioni

Inserisci i componibili di base nelle celle della griglia utilizzando Modifier.gridItem. Grid segue l'ordine zIndex standard in base all'ordine di composizione, quindi gli elementi dichiarati in un secondo momento nel blocco Grid vengono disegnati sopra gli elementi precedenti. Quando inserisci una sovrapposizione nella stessa cella o in un'area sovrapposta, dichiara il componibile di sovrapposizione dopo l'elemento di base o fai riferimento a un'area denominata. Puoi utilizzare Modifier.zIndex se devi controllare o sostituire esplicitamente questo ordine di disegno predefinito.

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

Risultati

Gli elementi dell'UI si sovrappongono in modo prevedibile all'interno della struttura della griglia 2D. Affidandoti all'ordine di dichiarazione standard, eviti contenitori nidificati complessi mantenendo un codice di layout pulito e reattivo.