Containerverhalten festlegen

Wenn Sie das Verhalten des FlexBox-Containers konfigurieren möchten, erstellen Sie einen FlexBoxConfig-Block und geben Sie ihn mit dem Parameter config 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. Es werden die folgenden Werte akzeptiert:

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

Elemente ausrichten und zusätzlichen Leerraum verteilen

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

Entlang der Hauptachse

Verwenden Sie justifyContent, um Elemente entlang der Hauptachse zu verteilen. Die folgende Tabelle zeigt das Verhalten, wenn die Richtung Row ist.

Start
Center
End
SpaceBetween
SpaceAround
SpaceEvenly

Entlang der Querachse

Mit alignItems können Sie Elemente entlang der Querachse in einer einzelnen Zeile ausrichten. Dieses Verhalten kann für einzelne Elemente mit dem Modifikator alignSelf überschrieben werden.

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

	Start	End	Center	Stretch	Baseline

Mit alignContent können Sie Zeilen an der Querachse ausrichten und zusätzlichen Leerraum zwischen den Zeilen verteilen. Diese Property gilt nur, wenn mehrere Zeilen vorhanden sind (Zeilenumbruch ist aktiviert). Die folgenden Bilder zeigen das Verhalten, wenn die Richtung Row ist:

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

Elemente zusammenfassen

Durch den Umbruch kann ein FlexBox-Container mehrzeilig werden. Elemente, die nicht passen, werden entlang der Querachse in eine neue Zeile oder Spalte verschoben. Das Umbruchverhalten wird mit wrap konfiguriert.

FlexWrap-Wert	Beispiel mit der 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 Querachse eine neue Zeile erstellt. Wenn die Richtung beispielsweise Row ist, wird eine neue Zeile darunter eingefügt.
WrapReverse: Wie Wrap, nur dass die neue Zeile in der entgegengesetzten Richtung zur Kreuzachse hinzugefügt wird. Wenn die Richtung beispielsweise Row ist, wird eine neue Zeile darüber eingefügt.

Im folgenden Beispiel wird gezeigt, wie der FlexBox-Umflussalgorithmus funktioniert. Der FlexBox-Container hat eine Hauptgröße von 100dp, wobei wrap auf FlexWrap.Wrap und der Abstand auf 8dp festgelegt ist. Er enthält drei Elemente mit basis 20dp, 40dp und 50dp.

In der Zeile sind 100dp Zeichen verfügbar. Kind 1 ist 20dp. Es ist Platz vorhanden, also wird Kind 1 in die Zeile eingefügt.

In der Zeile sind 80dp Einheiten verfügbar. Die Lücke ist 8dp Einheiten breit. Child 2 ist 40dp Einheiten breit. Der erforderliche Platz beträgt 48dp Einheiten. Es ist genügend Platz vorhanden, sodass die Lücke und Child 2 in der Zeile platziert werden.

In der Zeile sind 32dp verfügbar. Die Lücke ist 8dp. Child 3 ist 50dp. Der erforderliche Platz ist 58dp. In der aktuellen Zeile ist nicht genügend Platz vorhanden. Child 3 wird daher in einer neuen Zeile platziert.

Lücken zwischen Elementen einfügen

Mit rowGap und columnGap können Sie Lücken zwischen Zeilen und Spalten einfügen. Das ist nützlich, um zu vermeiden, dass untergeordnete Elemente Abstandsmodifikatoren erhalten.

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.