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 auf 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 Umbruch kann ein FlexBox-Container mehrzeilig werden. Elemente, die nicht passen, werden entlang der Querachse in eine neue Zeile oder Spalte verschoben. Konfigurieren Sie das Umbruchverhalten mit wrap.

FlexWrap-Wert	Beispiel mit der Richtung Row
NoWrap (Standard): Das Umbrechen von Elementen wird verhindert. 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.

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

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

Es sind 80dp Zeichen in der Zeile verfügbar. Die Lücke beträgt 8dp. Kind 2 ist 40dp. Der erforderliche Speicherplatz beträgt 48dp. Es ist Platz vorhanden, sodass die Lücke und Child 2 in die Zeile eingefügt werden.

Es sind 32dp Zeichen in der Zeile verfügbar. Die Lücke beträgt 8dp. Kind 3 ist 50dp. Der erforderliche Speicherplatz beträgt 58dp. In der aktuellen Zeile ist nicht genügend Platz, daher wird „Child 3“ 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, mit der sowohl columnGap als auch rowGap hinzugefügt werden.