Layout di flusso in Compose

FlowRow e FlowColumn sono composable simili a Row e Column, ma differiscono in quanto gli elementi passano alla riga successiva quando il container esaurisce lo spazio. In questo modo vengono create più righe o colonne. Il numero di elementi in una riga può essere controllato anche impostando maxItemsInEachRow o maxItemsInEachColumn. Spesso puoi utilizzare FlowRow e FlowColumn per creare layout reattivi: i contenuti non verranno tagliati se gli elementi sono troppo grandi per una dimensione e l'utilizzo di una combinazione di maxItemsInEach* con Modifier.weight(weight) può aiutarti a creare layout che riempiono/espandono la larghezza di una riga o di una colonna quando necessario.

L'esempio tipico è per un'interfaccia utente di chip o filtri:

Utilizzo di base

Per utilizzare FlowRow o FlowColumn, crea questi composable e inserisci gli elementi che devono seguire il flusso standard:

@Composable
private fun FlowRowSimpleUsageExample() {
    FlowRow(modifier = Modifier.padding(8.dp)) {
        ChipItem("Price: High to Low")
        ChipItem("Avg rating: 4+")
        ChipItem("Free breakfast")
        ChipItem("Free cancellation")
        ChipItem("£50 pn")
    }
}
FlowLayoutSnippets.kt

Questo snippet genera l'interfaccia utente mostrata sopra, con gli elementi che passano automaticamente alla riga successiva quando non c'è più spazio nella prima riga.

Funzionalità del layout di flusso

I layout di flusso hanno le seguenti funzionalità e proprietà che puoi utilizzare per creare layout diversi nella tua app.

Disposizione dell'asse principale: disposizione orizzontale o verticale

L'asse principale è l'asse su cui vengono disposti gli elementi (ad esempio, in FlowRow, gli elementi sono disposti orizzontalmente). Il parametro horizontalArrangement in FlowRow controlla il modo in cui lo spazio libero viene distribuito tra gli elementi.

La seguente tabella mostra esempi di impostazione di horizontalArrangement sugli elementi per FlowRow:

Disposizione orizzontale impostata su FlowRow	Risultato
Arrangement.Start (Default)
Arrangement.SpaceBetween
Arrangement.Center
Arrangement.End
Arrangement.SpaceAround
Arrangement.spacedBy(8.dp)

Per FlowColumn, sono disponibili opzioni simili con verticalArrangement, con il valore predefinito Arrangement.Top.

Disposizione dell'asse trasversale

L'asse trasversale è l'asse nella direzione opposta all'asse principale. Ad esempio, in FlowRow, questo è l'asse verticale. Per modificare la disposizione dei contenuti complessivi all'interno del container nell'asse trasversale, utilizza verticalArrangement per FlowRow e horizontalArrangement per FlowColumn.

Per FlowRow, la seguente tabella mostra esempi di impostazione di diversi verticalArrangement sugli elementi:

Disposizione verticale impostata su FlowRow	Risultato
Arrangement.Top (Default)
Arrangement.Bottom
Arrangement.Center

Per FlowColumn, sono disponibili opzioni simili con horizontalArrangement. La disposizione predefinita dell'asse trasversale è Arrangement.Start.

Allineamento dei singoli elementi

Potresti voler posizionare i singoli elementi all'interno della riga con allineamenti diversi. Questo è diverso da verticalArrangement e horizontalArrangement, in quanto allinea gli elementi all'interno della riga corrente. Puoi applicarlo con Modifier.align().

Ad esempio, quando gli elementi in un FlowRow hanno altezze diverse, la riga assume l'altezza dell'elemento più grande e applica Modifier.align(alignmentOption) agli elementi:

Allineamento verticale impostato su FlowRow	Risultato
Alignment.Top (Default)
Alignment.Bottom
Alignment.CenterVertically

Per FlowColumn, sono disponibili opzioni simili. L'allineamento predefinito è Alignment.Start.

Numero massimo di elementi in riga o colonna

I parametri maxItemsInEachRow o maxItemsInEachColumn definiscono il numero massimo di elementi nell'asse principale da consentire in una riga prima di passare alla riga successiva. Il valore predefinito è Int.MAX_INT, che consente il maggior numero possibile di elementi, purché le loro dimensioni consentano di inserirli nella riga.

Ad esempio, l'impostazione di un maxItemsInEachRow forza il layout iniziale a contenere solo 3 elementi:

Nessun valore massimo impostato	maxItemsInEachRow = 3

Ponderazioni degli elementi

La ponderazione aumenta un elemento in base al suo fattore e allo spazio disponibile nella riga in cui è stato inserito. È importante notare che esiste una differenza tra FlowRow e Row per quanto riguarda l'utilizzo delle ponderazioni per calcolare la larghezza di un elemento. Per Rows, la ponderazione si basa su tutti gli elementi nel Row. Con FlowRow, la ponderazione si basa sugli elementi della riga in cui è inserito un elemento, non su tutti gli elementi nel FlowRow container.

Ad esempio, se hai 4 elementi che rientrano tutti in una riga, ognuno con ponderazioni diverse di 1f, 2f, 1f e 3f, la ponderazione totale è 7f. Lo spazio rimanente in una riga o in una colonna verrà diviso per 7f. La larghezza di ogni elemento verrà calcolata utilizzando: weight * (remainingSpace / totalWeight).

Puoi utilizzare una combinazione di Modifier.weight e il numero massimo di elementi con FlowRow o FlowColumn per creare un layout simile a una griglia. Questo approccio è utile per creare layout reattivi che si adattano alle dimensioni del tuo dispositivo.

Esistono alcuni esempi diversi di ciò che puoi ottenere utilizzando le ponderazioni. Un esempio è una griglia in cui gli elementi hanno le stesse dimensioni, come mostrato di seguito:

Per creare una griglia di elementi con le stesse dimensioni, puoi procedere nel seguente modo:

val rows = 3
val columns = 3
FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = rows
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .weight(1f)
        .clip(RoundedCornerShape(8.dp))
        .background(MaterialColors.Blue200)
    repeat(rows * columns) {
        Spacer(modifier = itemModifier)
    }
}
FlowLayoutSnippets.kt

È importante notare che, se aggiungi un altro elemento e lo ripeti 10 volte anziché 9, l'ultimo elemento occupa l'intera ultima colonna, poiché la ponderazione totale per l'intera riga è 1f:

Puoi combinare le ponderazioni con altri Modifiers, ad esempio Modifier.width(exactDpAmount), Modifier.aspectRatio(aspectRatio) o Modifier.fillMaxWidth(fraction). Questi modificatori funzionano tutti insieme per consentire il ridimensionamento reattivo degli elementi all'interno di un FlowRow (o FlowColumn).

Puoi anche creare una griglia alternata di elementi di dimensioni diverse, in cui due elementi occupano metà della larghezza ciascuno e un elemento occupa l'intera larghezza della colonna successiva:

Puoi ottenere questo risultato con il seguente codice:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 2
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .clip(RoundedCornerShape(8.dp))
        .background(Color.Blue)
    repeat(6) { item ->
        // if the item is the third item, don't use weight modifier, but rather fillMaxWidth
        if ((item + 1) % 3 == 0) {
            Spacer(modifier = itemModifier.fillMaxWidth())
        } else {
            Spacer(modifier = itemModifier.weight(0.5f))
        }
    }
}
FlowLayoutSnippets.kt

Ridimensionamento frazionario

Utilizzando Modifier.fillMaxWidth(fraction), puoi specificare le dimensioni del container che un elemento deve occupare. Questo è diverso dal funzionamento di Modifier.fillMaxWidth(fraction) quando viene applicato a Row o Column, in quanto gli elementi Row/Column occupano una percentuale della larghezza rimanente, anziché la larghezza dell'intero container.

Ad esempio, il seguente codice produce risultati diversi quando si utilizza FlowRow rispetto a Row:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 3
) {
    val itemModifier = Modifier
        .clip(RoundedCornerShape(8.dp))
    Box(
        modifier = itemModifier
            .height(200.dp)
            .width(60.dp)
            .background(Color.Red)
    )
    Box(
        modifier = itemModifier
            .height(200.dp)
            .fillMaxWidth(0.7f)
            .background(Color.Blue)
    )
    Box(
        modifier = itemModifier
            .height(200.dp)
            .weight(1f)
            .background(Color.Magenta)
    )
}
FlowLayoutSnippets.kt

FlowRow: elemento centrale con una frazione di 0,7 della larghezza dell'intero container.
Row: elemento centrale che occupa lo 0,7% della larghezza rimanente della Row.

fillMaxColumnWidth() e fillMaxRowHeight()

L'applicazione di Modifier.fillMaxColumnWidth() o Modifier.fillMaxRowHeight() a un elemento all'interno di un FlowColumn o FlowRow garantisce che gli elementi nella stessa colonna o riga occupino la stessa larghezza o altezza dell' elemento più grande nella colonna/riga.

Ad esempio, questo esempio utilizza FlowColumn per visualizzare l'elenco dei dolci Android. Puoi notare la differenza nella larghezza di ogni elemento quando Modifier.fillMaxColumnWidth() viene applicato agli elementi rispetto a quando non viene applicato e gli elementi vengono aggregati.

FlowColumn(
    Modifier
        .padding(20.dp)
        .fillMaxHeight()
        .fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    maxItemsInEachColumn = 5,
) {
    repeat(listDesserts.size) {
        Box(
            Modifier
                .fillMaxColumnWidth()
                .border(1.dp, Color.DarkGray, RoundedCornerShape(8.dp))
                .padding(8.dp)
        ) {

            Text(
                text = listDesserts[it],
                fontSize = 18.sp,
                modifier = Modifier.padding(3.dp)
            )
        }
    }
}
FlowLayoutSnippets.kt

Modifier.fillMaxColumnWidth() applicato a ogni elemento
Nessuna modifica della larghezza impostata (elementi di wrapping)