Verhalten von Elementen festlegen

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

Artikelgröße

Mit den Funktionen 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 anfängliche Größe des Elements anzugeben, bevor zusätzlicher Platz verteilt wird. Sie können sich das als die bevorzugte Größe des Elements vorstellen.

Werttyp	Verhalten	Code-Snippet Hinweis: Die Boxen haben eine maximale intrinsische Größe von 100dp.	Beispiel mit Containerbreite 600dp
Auto (Standard)	Verwenden Sie die maximale intrinsische Größe des Elements. Die maximale intrinsische Breite einer Text-Komposition 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
Festgelegt: dp	Eine feste Größe in dp.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
Prozentsatz	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 ein Text-Element, das ein Wort enthält, 50dp für die Anzeige benötigt, aber auch basis = 10.dp hat, wird der Wert 50dp verwendet.

Elemente vergrößern, wenn Platz vorhanden ist

Verwenden Sie grow, um anzugeben, 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 Wert grow gibt an, wie viel des zusätzlichen Platzes ein bestimmtes untergeordnetes Element im Verhältnis zu seinen gleichgeordneten Elementen erhält. Standardmäßig werden Elemente nicht vergrößert.

Das folgende Beispiel zeigt ein FlexBox mit drei untergeordneten Elementen. Jeder 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 die Containergröße 600dp beträgt.

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. Untergeordnetes Element 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 das 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 statt zusätzlichem Platz der Platzmangel auf die Elemente verteilt wird. Der Wert shrink gibt an, wie viel des Platzdefizits das Element erhält, also wie stark es verkleinert wird. Standardmäßig haben Elemente den shrink-Wert 1f, d. h., sie werden gleichmäßig verkleinert.

Das folgende Beispiel zeigt zwei Text-Kompositionen mit demselben Text. Das erste untergeordnete Element hat einen Verkleinerungswert von 1f, d. h., es wird verkleinert, um das gesamte Platzdefizit 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 die Containergröße schrumpft, schrumpft auch „Child 1“.

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. Es hat dieselben möglichen Werte, zusätzlich aber auch Auto, das das Verhalten des Containers FlexBox übernimmt.

In diesem Beispiel ist FlexBox mit alignItems auf Start festgelegt und hat fünf untergeordnete Elemente, die die Ausrichtung 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 ordnet FlexBox Elemente in der Reihenfolge an, in der sie im Code deklariert sind. Sie können dieses Verhalten mit order überschreiben.

Der Standardwert für order ist null und FlexBox sortiert Elemente anhand dieses Werts in aufsteigender Reihenfolge. Alle Elemente mit demselben order-Wert werden in der Reihenfolge angeordnet, in der sie deklariert sind. Mit negativen und positiven order-Werten können Sie Elemente an den Anfang oder das Ende eines Layouts verschieben, ohne ihre Deklaration zu ändern.

Im folgenden Beispiel sehen Sie zwei untergeordnete Elemente. Die erste hat die Standardreihenfolge order von null und die zweite die Reihenfolge -1. Nach dem Sortieren wird Kind 1 nach Kind 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