Containerverhalten festlegen

Um das Verhalten des FlexBox-Containers zu konfigurieren, erstellen Sie einen FlexBoxConfig -Block und geben Sie ihn mit dem config-Parameter an.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        wrap(FlexWrap.Wrap)
        alignItems(FlexAlignItems.Center)
        alignContent(FlexAlignContent.SpaceAround)
        justifyContent(FlexJustifyContent.Center)
        gap(16.dp)
    }
) { // child items
}
FlexBoxSnippets.kt

Mit FlexBoxConfig können Sie die Layoutrichtung, das Umbruchverhalten, die Ausrichtung und die Abstände zwischen Elementen definieren.

Layoutrichtung

Mit der Funktion direction wird die Hauptachse festgelegt, die die Richtung bestimmt, in der Elemente angeordnet werden. Folgende Werte sind möglich:

• Row (Standard): Legt die Hauptachse horizontal fest. In Sprachen, die von links nach rechts geschrieben werden, ist die Richtung von links nach rechts, in Sprachen, die von rechts nach links geschrieben werden, ist sie umgekehrt.
• RowReverse: Kehrt die Richtung von Row um.
• Column: Legt die Hauptachse vertikal von oben nach unten fest.
• ColumnReverse: Kehrt die Richtung von Column um.

Elemente ausrichten und zusätzlichen Platz verteilen

In den folgenden Abschnitten wird beschrieben, wie Sie Elemente ausrichten und zusätzlichen Platz entlang der Haupt- und Nebenachse verteilen.

Entlang der Hauptachse

Verwenden Sie justifyContent, um Elemente entlang der Hauptachse zu verteilen. In der folgenden Tabelle wird das Verhalten beschrieben, wenn die Richtung Row ist.

Start
Center
End
SpaceBetween
SpaceAround
SpaceEvenly

Entlang der Nebenachse

Verwenden Sie alignItems, um Elemente entlang der Nebenachse in einer einzelnen Zeile auszurichten. Dieses Verhalten kann mit dem alignSelf Modifikator für einzelne Elemente überschrieben werden.

Die folgenden Bilder zeigen das Verhalten, wenn die Richtung Row ist:

	Start	End	Center	Stretch	Baseline

Verwenden Sie alignContent, um Zeilen an der Nebenachse auszurichten und zusätzlichen Platz zwischen den Zeilen zu verteilen. Diese Eigenschaft gilt nur, wenn mehrere Zeilen vorhanden sind (Umbruch ist aktiviert). Die folgenden Bilder zeigen das Verhalten, wenn die Richtung Row ist:

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

Elemente umbrechen

Durch den Umbruch kann ein FlexBox-Container mehrzeilig werden. Elemente, die nicht passen, werden entlang der Nebenachse in eine neue Zeile oder Spalte verschoben. Konfigurieren Sie das Umbruchverhalten mit wrap.

FlexWrap-Wert	Beispiel mit Richtung Row
NoWrap (Standard): Verhindert, dass Elemente umgebrochen werden. Elemente werden überlaufen, wenn die Hauptgröße nicht ausreicht.
Wrap: Wenn nicht genügend Platz für ein Element (plus Abstand) vorhanden ist, wird in Richtung der Nebenachse eine neue Zeile erstellt. Wenn die Richtung beispielsweise Row ist, wird eine neue Zeile darunter hinzugefügt.
WrapReverse: Wie Wrap, aber die neue Zeile wird in der entgegengesetzten Richtung zur Nebenachse hinzugefügt. Wenn die Richtung beispielsweise Row ist, wird eine neue Zeile darüber hinzugefügt.

Das folgende Beispiel zeigt, wie der Umbruchalgorithmus von FlexBox funktioniert. Der FlexBox-Container hat eine Hauptgröße von 100dp, wobei wrap auf FlexWrap.Wrap und ein Abstand von 8dp festgelegt ist. Er enthält drei Elemente mit basis 20dp, 40dp bzw. 50dp.

In der Zeile ist ein Platz von 100dp verfügbar. Das erste untergeordnete Element ist 20dp. Es ist Platz vorhanden, also wird das erste untergeordnete Element in die Zeile eingefügt.

In der Zeile ist ein Platz von 80dp verfügbar. Der Abstand beträgt 8dp. Das zweite untergeordnete Element ist 40dp. Der erforderliche Platz beträgt 48dp. Es ist Platz vorhanden, also werden der Abstand und das zweite untergeordnete Element in die Zeile eingefügt.

In der Zeile ist ein Platz von 32dp verfügbar. Der Abstand beträgt 8dp. Das dritte untergeordnete Element ist 50dp. Der erforderliche Platz beträgt 58dp. In der aktuellen Zeile ist nicht genügend Platz vorhanden, also wird das dritte untergeordnete Element in eine neue Zeile eingefügt.

Abstände zwischen Elementen hinzufügen

Fügen Sie mit rowGap und columnGap Abstände zwischen Zeilen und Spalten hinzu. So vermeiden Sie, dass Sie untergeordneten Elementen Modifikatoren für Abstände hinzufügen müssen.

rowGap fügt vertikalen Abstand zwischen Elementen und Zeilen hinzu.	columnGap fügt horizontalen Abstand zwischen Elementen und Zeilen hinzu.	gap ist eine praktische Funktion, die sowohl columnGap als auch rowGap hinzufügt.