Impostare il comportamento dell'elemento

Utilizza Modifier.flex per controllare il modo in cui un elemento cambia dimensioni, ordine e viene allineato all'interno di un FlexBox.

Dimensioni dell'articolo

Utilizza le funzioni basis, grow e shrink per controllare le dimensioni di un elemento.

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis(FlexBasis.Auto)
            grow(1.0f)
            shrink(0.5f)
        }
    )
}
FlexBoxSnippets.kt

Imposta la dimensione iniziale

Utilizza basis per specificare le dimensioni iniziali dell'elemento prima che venga distribuito lo spazio aggiuntivo. Puoi considerarla come la dimensione preferita dell'elemento.

Tipo di valore	Comportamento	Snippet di codice Nota: le caselle hanno una dimensione intrinseca massima di 100dp	Esempio di utilizzo della larghezza del contenitore 600dp
Auto (valore predefinito)	Utilizza le dimensioni intrinseche massime dell'elemento. Ad esempio, la larghezza intrinseca massima di un componibile Text è la larghezza di tutto il testo su una singola riga, senza ritorno a capo.	FlexBox { RedRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) BlueRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) } FlexBoxSnippets.kt
Fisso dp	Una dimensione fissa in dp.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
Percentuale	Una percentuale delle dimensioni del contenitore.	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

Se il valore di base è inferiore alla dimensione minima intrinseca dell'elemento, viene utilizzata la dimensione minima intrinseca. Ad esempio, se un elemento Text che contiene una parola richiede 50dp per la visualizzazione, ma ha anche basis = 10.dp, viene utilizzato il valore 50dp.

Espandi gli elementi quando c'è spazio

Utilizza grow per specificare di quanto aumenta un elemento quando c'è spazio aggiuntivo. Si tratta dello spazio rimanente nel contenitore FlexBox dopo aver sommato tutti i valori basis degli elementi. Il valore grow indica quanto spazio aggiuntivo riceverà un determinato elemento secondario rispetto ai suoi elementi di pari livello. Per impostazione predefinita, gli elementi non si espandono.

L'esempio seguente mostra un FlexBox con tre elementi secondari. Ognuno ha un valore di base di 100dp. Il primo elemento secondario ha un valore grow positivo. Poiché esiste un solo elemento secondario con un valore grow, il valore effettivo è irrilevante: purché sia positivo, l'elemento secondario riceve tutto lo spazio aggiuntivo.

Le immagini mostrano il comportamento di FlexBox quando le dimensioni del container sono 600dp.

FlexBox { RedRoundedBox( title = "400dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox(title = "100dp") GreenRoundedBox(title = "100dp") } FlexBoxSnippets.kt

Ogni elemento secondario ha un valore di base di 100dp. Hai 300dp di spazio extra. L'elemento secondario 1 aumenta di 300dp per riempire lo spazio aggiuntivo.

Nell'esempio seguente, le dimensioni del contenitore e quelle di basis sono le stesse. La differenza è che ogni elemento secondario ha un valore grow diverso.

FlexBox { RedRoundedBox( title = "150dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox( title = "200dp", modifier = Modifier.flex { grow(2f) } ) GreenRoundedBox( title = "250dp", modifier = Modifier.flex { grow(3f) } ) } FlexBoxSnippets.kt

Ogni elemento secondario ha un valore di base di 100dp. Hai 300dp di spazio extra. Il valore totale di espansione è 6. Il publisher secondario 1 cresce di (1 / 6) * 300 = 50dp Il secondo elemento secondario aumenta di (2 / 6) * 300 = 100dp Il bambino 3 cresce di (3 / 6) * 300 = 150dp

Riduci gli elementi quando lo spazio non è sufficiente

Utilizza shrink per specificare di quanto si riduce un elemento quando il contenitore FlexBox non ha spazio sufficiente per tutti gli elementi. shrink funziona allo stesso modo di grow, con la differenza che, anziché distribuire lo spazio aggiuntivo agli elementi, viene distribuito il deficit di spazio. Il valore shrink specifica la quantità di spazio mancante che l'elemento riceve o, meglio, di quanto l'elemento si ridurrà. Per impostazione predefinita, gli elementi hanno un valore shrink di 1f, il che significa che si riducono in modo uniforme.

L'esempio seguente mostra due componibili Text con lo stesso testo. Il primo elemento secondario ha un valore di riduzione pari a 1f, il che significa che si riduce per assorbire tutto il deficit di spazio.

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink(1f) }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink(0f) }
    )
}
FlexBoxSnippets.kt

Man mano che le dimensioni del contenitore si riducono, l'elemento secondario 1 si riduce.

Dimensioni del contenitore	UI FlexBox
700dp
500dp
450dp

Allineamento degli elementi

Utilizza alignSelf per controllare l'allineamento di un elemento rispetto all'asse trasversale. Questa operazione esegue l'override della proprietà alignItems del container per questo elemento. Ha gli stessi valori possibili, con l'aggiunta di Auto, che eredita il comportamento del container FlexBox.

Ad esempio, questo FlexBox ha alignItems impostato su Start e cinque elementi secondari che sostituiscono l'allineamento dell'asse trasversale.

FlexBox(
    config = {
        alignItems(FlexAlignItems.Start)
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Center) })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.End) })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Stretch) })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Baseline) })
}
FlexBoxSnippets.kt

Ordine degli elementi

Per impostazione predefinita, FlexBox dispone gli elementi nell'ordine in cui sono dichiarati nel codice. Esegui l'override di questo comportamento utilizzando order.

Il valore predefinito di order è zero e FlexBox ordina gli elementi in base a questo valore in ordine crescente. Tutti gli elementi con lo stesso valore order vengono disposti nello stesso ordine in cui sono dichiarati. Utilizza valori order negativi e positivi per spostare gli elementi all'inizio o alla fine di un layout senza modificare la posizione in cui sono dichiarati.

L'esempio seguente mostra due elementi secondari. La prima ha l'ordine predefinito order, ovvero zero, mentre la seconda ha l'ordine -1. Dopo l'ordinamento, Figlio 1 viene visualizzato dopo Figlio 2.

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order(-1)
        }
    )
}
FlexBoxSnippets.kt