Imposta le proprietà del contenitore

Puoi definire una configurazione del container Griglia per creare layout flessibili che rispondano a diversi tipi di contenuti e dimensioni dello schermo. Questa pagina descrive come eseguire le seguenti operazioni:

• Definire una griglia: configura la struttura di base di righe e colonne.
• Inserire elementi in una griglia: scopri come gli elementi vengono inseriti nelle celle della griglia e come modificare la direzione del flusso.
• Gestire le dimensioni delle tracce: utilizza le dimensioni fisse, in percentuale, flessibili e intrinseche per impostare le dimensioni delle tracce.
• Impostare le spaziature: gestisci le "canalette" tra righe e colonne.

Definire una griglia

Una griglia è costituita da colonne e righe. Il Grid composable ha un parametro config che accetta un'espressione 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

Inserire elementi in una griglia

Grid prende gli elementi dell'interfaccia utente nell'espressione 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 inserire un elemento dell'interfaccia utente nella cella della griglia disponibile nella riga; in caso contrario, lo inserisce in una cella della griglia disponibile nella riga successiva. Se non sono presenti celle vuote, Grid crea una nuova riga.

Nell'esempio seguente, la griglia ha sei celle e inserisce una scheda in ognuna di esse (Figura 1). Ogni cella della griglia è 160dp x 90dp, per una dimensione totale della griglia 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 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 le dimensioni delle tracce

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

• Fissa (Dp): alloca una dimensione specifica (ad es. column(180.dp)).
• Percentuale (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 aver calcolato le tracce fisse e in percentuale. Ad esempio, se due righe sono impostate su 1.fr e 3.fr, quest'ultima riceve il 75% dell'altezza rimanente.
• Intrinseca: 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é forzarlo in un container 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 completa del testo in un blocco di testo senza wrapping).
• GridTrackSize.MinContent: utilizza le dimensioni intrinseche minime dei contenuti (ad es. 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 riduce e applica il wrapping dei contenuti per adattarli al container principale.

L'esempio seguente inserisce due testi uno accanto all'altro. Le dimensioni della colonna per il primo testo sono determinate 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 le spaziature tra righe e colonne

Una volta dimensionate le tracce della griglia, puoi modificare la spaziatura della griglia per perfezionare la spaziatura tra le tracce. Puoi specificare la spaziatura delle colonne con la columnGap funzione, e la spaziatura delle righe con rowGap. Nell'esempio seguente, è presente una spaziatura di 16dp tra ogni riga e una spaziatura 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 spaziature delle stesse dimensioni di colonne e righe, e per definire separatamente le dimensioni di colonne e spaziature utilizzando una singola funzione. Il seguente codice aggiunge spaziature 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