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 einer FlexBox ausgerichtet wird.

Elementgröße

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

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

Anfangsgröße festlegen

Mit basis können Sie die Anfangsgröße des Elements festlegen, 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 einer Containerbreite von 600dp
Auto (Standard)	Die maximale intrinsische Größe des Elements wird verwendet. Die maximale intrinsische Breite eines zusammensetzbaren Text-Elements ist beispielsweise die Breite des gesamten Texts in einer einzelnen Zeile – ohne Umbruch.	FlexBox { RedRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) BlueRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) } FlexBoxSnippets.kt
Fester Wert in dp	Eine feste Größe in Dp.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
Prozent	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 ein Wert von 50dp verwendet.

Elemente vergrößern, wenn Platz vorhanden ist

Mit grow können Sie angeben, um wie viel ein Element vergrößert wird, wenn zusätzlicher Platz vorhanden ist. Dieser Platz ist der Platz, der im FlexBox-Container verbleibt, nachdem alle basis-Werte der Elemente addiert wurden. Der grow-Wert gibt an, wie viel des zusätzlichen Platzes ein bestimmtes untergeordnetes Element im Verhältnis zu seinen Geschwistern erhält. Standardmäßig werden Elemente nicht vergrößert.

Im folgenden Beispiel sehen Sie eine FlexBox mit drei untergeordneten Elementen. Jedes 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 FlexBox-Verhalten, 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 Platz vorhanden. Das erste untergeordnete Element 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 Platz vorhanden. Der gesamte „grow“-Wert ist 6. Das erste untergeordnete Element wird um (1 / 6) * 300 = 50dp vergrößert. Das zweite untergeordnete Element wird um (2 / 6) * 300 = 100dp vergrößert. Das dritte untergeordnete Element wird um (3 / 6) * 300 = 150dp vergrößert.

Elemente verkleinern, wenn nicht genügend Platz vorhanden ist

Mit shrink können Sie angeben, um wie viel ein Element verkleinert wird, wenn der FlexBox-Container nicht genügend Platz für alle Elemente bietet. shrink funktioniert genauso wie grow. Anstatt zusätzlichen Platz auf Elemente zu verteilen, wird das Platzdefizit auf Elemente verteilt. Der shrink-Wert gibt an, wie viel des Platzdefizits das Element erhält oder um wie viel das Element verkleinert wird. Standardmäßig haben Elemente einen shrink-Wert von 1f, was bedeutet, dass sie gleichmäßig verkleinert werden.

Im folgenden Beispiel sehen Sie zwei zusammensetzbare Text-Elemente mit demselben Text. Das erste untergeordnete Element hat einen „shrink“-Wert von 1f, was bedeutet, dass es verkleinert wird, 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 kleiner wird, wird auch das erste untergeordnete Element verkleinert.

Containergröße	FlexBox-UI
700dp
500dp
450dp

Elementausrichtung

Mit alignSelf können Sie festlegen, wie ein Element an der Querachse ausgerichtet wird. Dadurch wird die alignItems Property des Containers für dieses Element überschrieben. Es hat dieselben möglichen Werte, zusätzlich zu Auto, das das Verhalten des FlexBox-Containers übernimmt.

In dieser FlexBox ist alignItems beispielsweise auf Start festgelegt und es gibt 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 werden Elemente in FlexBox in der Reihenfolge angeordnet, in der sie im Code deklariert sind. Sie können dieses Verhalten mit order überschreiben.

Der Standardwert für order ist 0 und FlexBox sortiert Elemente anhand dieses Werts in aufsteigender Reihenfolge. Alle Elemente mit demselben order-Wert werden in derselben 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. Das erste hat den Standardwert order von 0 und das zweite hat den Wert -1. Nach dem Sortieren wird das erste untergeordnete Element nach dem zweiten 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