Impostare il comportamento dell'elemento

Utilizza Modifier.flex per controllare come un elemento cambia dimensione, ordine e allineamento all'interno di un FlexBox.

Taglia articolo

Utilizza le proprietà 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 dimensioni iniziali

Utilizza basis per specificare la dimensione iniziale dell'elemento prima che venga distribuito lo spazio aggiuntivo. Puoi considerarla la dimensione preferita dell'articolo.

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 (predefinito)	Utilizza le dimensioni intrinseche massime dell'elemento. Ad esempio, la larghezza intrinseca massima di un componente componibile Text è la larghezza di tutto il testo su una singola riga, senza wrapping.	FlexBox { RedRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) BlueRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) } FlexBoxSnippets.kt
Corretto 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 la visualizzazione di 50dp, ma ha anche basis = 10.dp, viene utilizzato un valore di 50dp.

Ingrandire gli elementi quando c'è spazio

Utilizza grow per specificare di quanto aumenta un elemento quando c'è spazio aggiuntivo. Questo è lo spazio rimanente nel contenitore FlexBox dopo aver sommato tutti i valori basis degli elementi. Il valore grow indica quanto spazio extra riceverà un determinato elemento secondario rispetto ai suoi fratelli. Per impostazione predefinita, gli elementi non aumentano.

L'esempio seguente mostra un elemento FlexBox con tre elementi secondari. Ciascuno 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. Se è positivo, l'elemento secondario riceve tutto lo spazio aggiuntivo.

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

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

Ogni figlio ha un valore di base di 100dp. C'è spazio extra per 300dp. Child 1 aumenta di 300dp per riempire lo spazio aggiuntivo.

Nell'esempio seguente, le dimensioni del contenitore e di basis sono le stesse. La differenza è che ogni figlio 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 figlio ha un valore di base di 100dp. C'è spazio extra per 300dp. Il valore di crescita totale è 6. Il bambino 1 cresce di (1 / 6) * 300 = 50dp Il bambino 2 cresce di (2 / 6) * 300 = 100dp Il bambino 3 cresce di (3 / 6) * 300 = 150dp

Ridurre le dimensioni degli elementi quando lo spazio è insufficiente

Utilizza shrink per specificare la riduzione di un elemento quando il contenitore FlexBox non ha spazio sufficiente per tutti gli elementi. shrink funziona allo stesso modo di grow, tranne per il fatto che, anziché distribuire spazio extra agli elementi, viene distribuito il deficit di spazio agli elementi. Il valore shrink specifica la quantità di spazio che l'elemento riceve, o meglio, la quantità di spazio che l'elemento occuperà. Per impostazione predefinita, gli elementi hanno un valore shrink pari a 1f, il che significa che si restringono in modo uniforme.

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

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, anche quelle di Child 1 si riducono.

Dimensioni del contenitore	UI FlexBox
700dp
500dp
450dp

Allineamento degli elementi

Utilizza alignSelf per controllare l'allineamento di un elemento all'asse trasversale. Questa esegue l'override della proprietà alignItems del contenitore per questo elemento. Ha tutti gli stessi valori possibili, con l'aggiunta di Auto, che eredita il comportamento del contenitore 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 articoli

Per impostazione predefinita, FlexBox dispone gli elementi nell'ordine in cui vengono 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. Gli elementi con lo stesso valore order sono disposti nello stesso ordine in cui sono dichiarati. Utilizza valori order positivi e negativi 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. Il primo ha un ordine predefinito di order pari a zero, mentre il secondo ha un ordine di -1. Dopo l'ordinamento, il bambino 1 viene visualizzato dopo il bambino 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