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

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)
        }
    }
) {
}

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()
}

Sei carte sono disposte in una griglia con tre righe e due colonne.
Figura 1. Sei carte sono disposte in una griglia con tre righe e due colonne.

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()
}

La funzione di flusso cambia la direzione in cui posizionare gli elementi.
Figura 2. GridFlow.Row (sinistra) e GridFlow.Column (destra).

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)).
  • 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 il calcolo delle tracce fisse e percentuali. 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)")
        PastelGreenCard("Percentage(0.2f)")
    PastelBlueCard("Flex(1.fr)")
        PastelYellowCard("Auto")

}

Altezze delle righe definite utilizzando le quattro opzioni principali di dimensionamento delle tracce.
Figura 3. Altezze delle righe definite utilizzando le quattro opzioni principali di dimensionamento delle tracce in Grid.

Imposta la dimensione minima per le tracce della griglia flessibile

Quando un contenitore della griglia non ha più spazio, una traccia flessibile standard può ridursi a 0.dp. Per evitare questo problema e assicurarti che i contenuti non vengano compressi, utilizza GridTrackSize.MinMax per applicare una dimensione minima esplicita mantenendo la traccia flessibile.

L'esempio seguente assegna almeno 100.dp alla prima riga:

Grid(
    config = {
        column(1f)
        // The first row has a minimum height of 100.dp and can expand to 
        // the half of the remaining space.
        row(GridTrackSize.MinMax(100.dp, 1.fr))
        // The second row takes the half of the remaining space.
        row(1.fr)
        // The third row has a fixed height of 200.dp.
        row(200.dp)
    },
    modifier = Modifier.size(360.dp) // Total grid height is 360.dp
) {
    PastelRedCard("MinMax(100.dp, 1.fr)")
        PastelGreenCard("Flex(1.fr)")
    PastelBlueCard("Fixed(200.dp)")
}

Altezze delle righe definite utilizzando le quattro opzioni principali di dimensionamento delle tracce.
Figura 4. La prima riga ha un'altezza di almeno 100.dp.

Imposta la dimensione minima della traccia della griglia per posizionare gli elenchi pigri

Le tracce flessibili standard eseguono automaticamente query sulle dimensioni intrinseche dei relativi elementi secondari per stabilire una dimensione di base. Tuttavia, Jetpack Compose vieta di eseguire query sulle dimensioni intrinseche di SubcomposeLayout, che supporta i componenti, come LazyColumn e LazyRow.

L'inserimento di un elenco pigro all'interno di una traccia flessibile standard causa un arresto anomalo di IllegalStateException. Per posizionare in modo sicuro le liste pigre all'interno di una traccia della griglia flessibile, utilizza MinMax con una dimensione minima esplicita (ad esempio 0.dp) per ignorare il passaggio di misurazione intrinseca.

Grid(
    config = {
        column(1f)
        // The first row's height is determined by the height of the Text composable.
        row(GridTrackSize.Auto)
        // The second row occupies the remaining space, allowing the LazyColumn to scroll.
        row(GridTrackSize.MinMax(0.dp, 1.fr))

        gap(8.dp)
    },
    modifier = Modifier.size(width = 170.dp, height = 240.dp)
) {
    Text("Lazy column in a Grid")
    // The LazyColumn is placed in the second row, filling the remaining space.
    LazyColumn(verticalArrangement = Arrangement.spacedBy(4.dp)) {
        items(100) { number ->
            PastelGreenCard("Card $number")
        }
    }
}

Altezze delle righe definite utilizzando le quattro opzioni principali di dimensionamento delle tracce.
Figura 5. LazyColumn in una cella della griglia.

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 la dimensione intrinseca massima dei contenuti (ad es. la larghezza è determinata dalla lunghezza completa del testo in un blocco di testo senza wrapping).
  • GridTrackSize.MinContent: utilizza la dimensione intrinseca minima 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 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.")
}

Dimensioni intrinseche specificate nelle colonne.
Figura 5. Dimensioni intrinseche specificate nelle colonne.

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()
}

Spazi tra righe e colonne.
Figura 6. Spazi tra righe e colonne.

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 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()
}

Indietro
Per iniziare
Avanti
Impostare le proprietà degli elementi