Verhalten von Elementen festlegen

Mit Modifier.flex können Sie festlegen, wie sich die Größe und Reihenfolge eines Elements ändert und wie es in einem FlexBox ausgerichtet wird.

Artikelgröße

Mit den Eigenschaften basis, grow und shrink können Sie die Größe eines Elements steuern.

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

Anfangsgröße festlegen

Verwenden Sie basis, um die ursprüngliche Größe des Elements anzugeben, bevor zusätzlicher Platz verteilt wird. Sie können sich das als die bevorzugte Größe des Artikels vorstellen.

Werttyp	Verhalten	Code-Snippet Hinweis: Die Felder haben eine maximale intrinsische Größe von 100dp.	Beispiel mit der Containerbreite 600dp
Auto (Standard)	Verwenden Sie die maximale intrinsische Größe des Artikels. Die maximale intrinsische Breite einer Text-Composable-Funktion ist beispielsweise die Breite des gesamten Texts in einer einzelnen Zeile – ohne Zeilenumbruch.	FlexBox { RedRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) BlueRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) } FlexBoxSnippets.kt
Behoben dp	Eine feste Größe in Dp.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
Percentage	Ein Prozentsatz der Containergröße.	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

Wenn der Basiswert kleiner als die intrinsische Mindestgröße des Elements ist, wird stattdessen die intrinsische Mindestgröße verwendet. Wenn beispielsweise für ein Text-Element, das ein Wort enthält, 50dp für die Anzeige erforderlich ist, aber auch basis = 10.dp vorhanden ist, wird der Wert 50dp verwendet.

Elemente vergrößern, wenn Platz vorhanden ist

Mit grow geben Sie an, wie stark ein Element wächst, wenn zusätzlicher Platz vorhanden ist. Das ist der verbleibende Platz im FlexBox-Container, nachdem alle basis-Werte der Elemente addiert wurden. Der grow-Wert gibt an, wie viel zusätzlicher Platz einem bestimmten untergeordneten Element im Vergleich zu seinen Geschwistern zugewiesen wird. Standardmäßig werden Elemente nicht vergrößert.

Das folgende Beispiel zeigt ein FlexBox-Element mit drei untergeordneten Elementen. Jede hat einen Basiswert von 100dp. Das erste untergeordnete Element hat einen positiven grow-Wert. Da es nur ein untergeordnetes Element mit einem grow-Wert gibt, ist der tatsächliche Wert irrelevant. Solange er positiv ist, erhält das untergeordnete Element den gesamten zusätzlichen Platz.

Die Bilder zeigen das Verhalten von FlexBox, wenn der Container 600dp groß ist.

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

Jedes untergeordnete Element hat einen Basiswert von 100dp. Es sind 300dp zusätzlicher Speicherplatz verfügbar. Child 1 wird um 300dp vergrößert, um den zusätzlichen Platz zu füllen.

Im folgenden Beispiel sind die Containergröße und die basis-Größe identisch. Der Unterschied besteht darin, dass jedes untergeordnete Element einen anderen grow-Wert hat.

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

Jedes untergeordnete Element hat einen Basiswert von 100dp. Es sind 300dp zusätzlicher Speicherplatz verfügbar. Der Gesamtwert für „Wachstum“ beträgt 6. Kind 1 wächst um (1 / 6) * 300 = 50dp Kind 2 wächst um (2 / 6) * 300 = 100dp Kind 3 wächst um (3 / 6) * 300 = 150dp

Elemente verkleinern, wenn nicht genügend Platz vorhanden ist

Mit shrink können Sie angeben, wie stark ein Element verkleinert wird, wenn der FlexBox-Container nicht genügend Platz für alle Elemente bietet. shrink funktioniert genauso wie grow, nur dass anstelle von zusätzlichem Platz ein Platzmangel auf die Artikel verteilt wird. Der Wert shrink gibt an, wie viel des Platzdefizits das Element erhält bzw. um wie viel das Element verkleinert wird. Standardmäßig haben Elemente den shrink-Wert 1f, d. h., sie werden gleichmäßig verkleinert.

Das folgende Beispiel zeigt zwei Text-Composables mit demselben Text. Das erste untergeordnete Element hat den Wert 1f für „shrink“, d. h., es wird verkleinert, um den gesamten Platzmangel auszugleichen.

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

Wenn der Container kleiner wird, wird auch Child 1 kleiner.

Containergröße	FlexBox-Benutzeroberfläche
700dp
500dp
450dp

Elementausrichtung

Mit alignSelf können Sie festlegen, wie ein Element an der Querachse ausgerichtet wird. Dadurch wird das Attribut alignItems des Containers für dieses Element überschrieben. Sie hat dieselben möglichen Werte, mit Ausnahme von Auto, das das Verhalten des FlexBox-Containers übernimmt.

In diesem Beispiel ist für FlexBox der Wert alignItems auf Start festgelegt und es gibt fünf untergeordnete Elemente, die die Ausrichtung auf der Querachse überschreiben.

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

Elementreihenfolge

Standardmäßig werden Elemente in FlexBox in der Reihenfolge angeordnet, in der sie im Code deklariert werden. Sie können dieses Verhalten mit order überschreiben.

Der Standardwert für order ist null. Mit FlexBox werden Elemente anhand dieses Werts in aufsteigender Reihenfolge sortiert. Elemente mit demselben order-Wert werden in derselben Reihenfolge angeordnet, in der sie deklariert werden. Verwenden Sie negative und positive order-Werte, um Elemente an den Anfang oder das Ende eines Layouts zu verschieben, ohne die Deklaration zu ändern.

Im folgenden Beispiel sind zwei untergeordnete Elemente zu sehen. Die erste hat den Standardwert order von null und die zweite hat die Ordnung -1. Nach dem Sortieren wird „Child 1“ nach „Child 2“ angezeigt.

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