Imposta le proprietà del contenitore

Puoi definire una configurazione del contenitore Griglia per creare layout flessibili che rispondono a diverse dimensioni dello schermo e tipi di contenuti. Questa pagina descrive come:

• Definisci una griglia: configura la struttura di base di righe e colonne.
• Inserire elementi in una griglia: scopri come vengono inseriti gli elementi nelle celle della griglia e come modificare la direzione del flusso.
• Gestisci il dimensionamento delle tracce: utilizza il dimensionamento fisso, frazionario, flessibile e intrinseco per impostare le dimensioni delle tracce.
• Imposta spazi: gestisci gli "spazi" tra righe e colonne.

Definisci una griglia

Una griglia è composta da colonne e righe. Il composable Grid ha un parametro config che accetta una funzione lambda per definire le colonne e le righe all'interno di GridConfigurationScope. L'esempio seguente definisce una griglia con tre righe e due colonne, ciascuna con una dimensione fissa specificata in Dp:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

Posizionare gli elementi in una griglia

Grid prende gli elementi dell'interfaccia utente nella lambda content e li inserisce nelle celle della griglia. La griglia dispone gli elementi indipendentemente dal fatto che tu abbia definito esplicitamente le righe e le colonne. Per impostazione predefinita, Grid tenta di posizionare un elemento UI nella cella della griglia disponibile nella riga; se non riesce, lo posiziona in una cella della griglia disponibile nella riga successiva. Se non ci sono celle vuote, Grid crea una nuova riga.

Nell'esempio seguente, la griglia ha sei celle e inserisce una scheda in ognuna (Figura 1). Ogni cella della griglia è 160dp x 90dp, per un totale di 320dp x 270dp.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

Per modificare questo comportamento predefinito in modo da riempire i dati per colonna, imposta la proprietà flow su GridFlow.Column.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

Gestire il dimensionamento delle tracce

Righe e colonne sono denominate collettivamente traccia della griglia. Puoi specificare le dimensioni di una traccia della griglia utilizzando uno dei seguenti metodi:

• Fisso (Dp): alloca una dimensione specifica (ad es. column(180.dp)).
• Frazionario (Float): alloca una percentuale dello spazio totale disponibile da 0.0f a 1.0f (ad es. row(0.5f) per il 50%).
• Flessibile (Fr): distribuisce lo spazio rimanente in modo proporzionale dopo il calcolo delle tracce fisse e frazionarie. Ad esempio, se due righe sono impostate su 1.fr e 3.fr, la seconda riceve il 75% dell'altezza rimanente.
• Intrinseco: dimensiona la traccia in base ai contenuti al suo interno. Per saperne di più, consulta Determinare intrinsecamente le dimensioni della traccia della griglia.

L'esempio seguente utilizza le diverse opzioni di dimensionamento delle tracce per definire le altezze delle righe:

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
GridTrackSize.kt

Determinare intrinsecamente le dimensioni della traccia della griglia

Puoi utilizzare il dimensionamento intrinseco per un Grid quando vuoi che il layout si adatti ai contenuti, anziché forzarli in un contenitore fisso. Le dimensioni della traccia della griglia sono determinate dai seguenti valori:

• GridTrackSize.MaxContent: utilizza le dimensioni intrinseche massime dei contenuti (ad es. la larghezza è determinata dalla lunghezza totale del testo in un blocco di testo senza wrapping).
• GridTrackSize.MinContent: utilizza la dimensione intrinseca minima dei contenuti (ad esempio, la larghezza è determinata dalla parola singola più lunga in un blocco di testo).
• GridTrackSize.Auto: utilizza una dimensione flessibile per una traccia che si adatta in base allo spazio disponibile. Per impostazione predefinita, si comporta come MaxContent, ma comprime e dispone il contenuto in modo che rientri nel contenitore principale.

L'esempio seguente posiziona due testi uno accanto all'altro. La dimensione della colonna per il primo testo è determinata dalla larghezza minima richiesta per visualizzare il testo, mentre la larghezza della seconda colonna dipende dalla larghezza massima richiesta del testo.

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}
GridTrackSize.kt

Impostare gli spazi tra righe e colonne

Una volta dimensionate le tracce della griglia, puoi modificare lo spazio della griglia per perfezionare la spaziatura tra le tracce. Puoi specificare lo spazio tra le colonne con la funzione columnGap e lo spazio tra le righe con rowGap. Nell'esempio seguente, c'è uno spazio di 16dp tra ogni riga e uno spazio di 8dp tra ogni colonna (Figura 5).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

Puoi anche utilizzare la funzione di praticità gap per definire spazi vuoti della stessa dimensione di colonna e riga e per definire separatamente le dimensioni di colonne e spazi vuoti utilizzando una singola funzione. Il seguente codice aggiunge spazi vuoti di 8dp alla griglia:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt