Imposta il comportamento del contenitore

Per configurare il comportamento del container FlexBox, crea un blocco FlexBoxConfig e forniscilo utilizzando il parametro config.

FlexBox(
    config = {
        direction = FlexDirection.Column
        wrap = FlexWrap.Wrap
        alignItems = FlexAlignItems.Center
        alignContent = FlexAlignContent.SpaceAround
        justifyContent = FlexJustifyContent.Center
        gap(16.dp)
    }
) { // child items
}
FlexBoxSnippets.kt

Utilizza FlexBoxConfig per definire la direzione del layout, il comportamento di wrapping, allineamento e gli spazi tra gli elementi.

Direzione del layout

La proprietà direction definisce l'asse principale, che determina la direzione in cui vengono disposti gli elementi.

• Row (valore predefinito): imposta l'asse principale in orizzontale. Nelle impostazioni internazionali da sinistra a destra la direzione sarà da sinistra a destra, mentre nelle impostazioni internazionali da destra a sinistra sarà il contrario.
• RowReverse: inverte la direzione di Row.
• Column: imposta l'asse principale in verticale, dall'alto verso il basso.
• ColumnReverse: inverte la direzione di Column.

Allineare gli elementi e distribuire lo spazio extra

Le sezioni seguenti descrivono come allineare gli elementi e distribuire lo spazio extra lungo gli assi principale e trasversale.

Lungo l'asse principale

Utilizza justifyContent per distribuire gli elementi lungo l'asse principale. La seguente tabella mostra il comportamento quando la direzione è Row.

Start
Center
End
SpaceBetween
SpaceAround
SpaceEvenly

Lungo l'asse trasversale

Utilizza alignItems per allineare gli elementi lungo l'asse trasversale all'interno di una singola riga. Questo comportamento può essere sostituito dai singoli elementi utilizzando il alignSelf modificatore.

Le immagini seguenti mostrano il comportamento quando la direzione è Row:

	Start	End	Center	Stretch	Baseline

Utilizza alignContent per allineare le righe all'asse trasversale e per distribuire lo spazio extra tra le righe. Questa proprietà si applica solo quando sono presenti più righe (il wrapping è abilitato). Le immagini seguenti mostrano il comportamento quando la direzione è Row:

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

Aggregare elementi

Il wrapping consente a un container FlexBox di diventare multiriga, spostando gli elementi che non rientrano in una nuova riga o colonna lungo l'asse trasversale. Configura il comportamento di wrapping utilizzando wrap.

FlexWrap valore	Esempio che utilizza la direzione Row
NoWrap (valore predefinito): impedisce l'aggregazione degli elementi. Se la dimensione principale non è sufficiente, gli elementi vanno in overflow.
Wrap: quando lo spazio per un elemento (più eventuali spazi) non è sufficiente, viene creata una nuova riga nella direzione dell'asse trasversale. Ad esempio, se la direzione è Row, viene aggiunta una nuova riga sotto.
WrapReverse: come Wrap, tranne per il fatto che la nuova riga viene aggiunta nella direzione opposta all'asse trasversale. Ad esempio, se la direzione è Row, viene aggiunta una nuova riga sopra.

L'esempio seguente mostra come funziona l'algoritmo di wrapping FlexBox. Il FlexBox container ha una dimensione principale di 100dp, con wrap impostato su FlexWrap.Wrap e uno spazio di 8dp. Contiene tre elementi con basis 20dp, 40dp, e 50dp rispettivamente.

Nella riga è disponibile uno spazio di 100dp. L'elemento secondario 1 è 20dp. Lo spazio è sufficiente, quindi l'elemento secondario 1 viene inserito nella riga.

Figura 1. Il primo elemento inserito nel FlexBox container.

Nella riga è disponibile uno spazio di 80dp. Lo spazio è 8dp. L'elemento secondario 2 è 40dp. Lo spazio richiesto è 48dp. Lo spazio è sufficiente, quindi lo spazio e l'elemento secondario 2 vengono inseriti nella riga.

Figura 2. Il secondo elemento inserito nel FlexBox container dopo il primo elemento.

Nella riga è disponibile uno spazio di 32dp. Lo spazio è 8dp. L'elemento secondario 3 è 50dp. Lo spazio richiesto è 58dp. Lo spazio nella riga corrente non è sufficiente, quindi l'elemento secondario 3 viene inserito in una nuova riga.

Figura 3. Il terzo elemento inserito in una nuova riga perché non rientra nella prima riga.

Aggiungere spazi tra gli elementi

Aggiungi spazi tra righe e colonne utilizzando rowGap e columnGap. Questa opzione è utile per evitare di aggiungere modificatori di spaziatura agli elementi secondari.

rowGap aggiunge spazio verticale tra elementi e righe.	columnGap aggiunge spazio orizzontale tra elementi e righe.	gap è una funzione utile che aggiunge sia columnGap sia rowGap.