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 ritorno a capo, l'allineamento e gli spazi tra gli elementi.

Direzione del layout

La funzione direction imposta l'asse principale, che determina la direzione in cui vengono disposti gli elementi. Accetta i seguenti valori:

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

Allinea gli elementi e distribuisci lo spazio aggiuntivo

Le sezioni seguenti descrivono come allineare gli elementi e distribuire lo spazio aggiuntivo 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 articoli utilizzando il modificatore alignSelf.

Le seguenti immagini 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 aggiuntivo tra le righe. Questa proprietà si applica solo quando sono presenti più righe (l'andata a capo è abilitata). Le seguenti immagini mostrano il comportamento quando la direzione è Row:

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

Aggrega elementi

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

Valore FlexWrap	Esempio di utilizzo della direzione Row
NoWrap (valore predefinito): impedisce il ritorno a capo degli elementi. Gli elementi si espandono se la dimensione principale non è sufficiente.
Wrap: quando lo spazio non è sufficiente per un elemento (più un eventuale gap), 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, ma la nuova riga viene aggiunta nella direzione opposta all'asse trasversale. Ad esempio, se la direzione è Row, viene aggiunta una nuova riga sopra.

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

C'è 100dp posto disponibile nella fila. Il primo elemento secondario è 20dp. C'è spazio, quindi il bambino 1 viene inserito nella fila.

C'è 80dp posto disponibile nella fila. Il divario è di 8dp. Il secondo figlio è 40dp. Lo spazio richiesto è 48dp. C'è spazio, quindi lo spazio vuoto e l'elemento secondario 2 vengono inseriti nella riga.

C'è 32dp posto disponibile nella fila. Il divario è di 8dp. Il terzo figlio ha 50dp anni. Lo spazio richiesto è 58dp. Non c'è spazio sufficiente nella riga corrente, quindi l'elemento secondario 3 viene posizionato in una nuova riga.

Aggiungi spazi tra gli elementi

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

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