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

Verwenden Sie FlexBoxConfig, um die Layoutrichtung, das Umbruchverhalten, die Ausrichtung und die Abstände zwischen Elementen zu definieren.

Layoutrichtung

Mit der Funktion direction wird die Hauptachse festgelegt, die die Richtung vorgibt, in der Elemente angeordnet werden. Folgende Werte sind zulässig:

• Row (Standard): Legt die Hauptachse als horizontal fest. In Sprachen, die von links nach rechts gelesen werden, ist dies von links nach rechts, in Sprachen, die von rechts nach links gelesen werden, ist es umgekehrt.
• RowReverse: Kehrt die Richtung von Row um.
• Column: Legt die Hauptachse als 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 Querachse verteilen.

Entlang der Hauptachse

Verwenden Sie justifyContent, um Elemente entlang der Hauptachse zu verteilen. In der folgenden Tabelle wird das Verhalten für die Richtung Row gezeigt.

Start
Center
End
SpaceBetween
SpaceAround
SpaceEvenly

Entlang der Querachse

Verwenden Sie alignItems, um Elemente entlang der Querachse innerhalb einer einzelnen Zeile auszurichten. 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

Verwenden Sie alignContent, um Zeilen an der Querachse auszurichten und zusätzlichen Platz zwischen den Zeilen zu verteilen. Diese Eigenschaft 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 umbrechen

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

FlexWrap-Wert	Beispiel mit der Richtung Row
NoWrap (Standard): Verhindert, dass Elemente umgebrochen werden. Elemente werden umgebrochen, wenn die Hauptgröße nicht ausreicht.
Wrap: Wenn nicht genügend Platz für ein Element (plus etwaige Lücken) vorhanden ist, wird eine neue Zeile in Richtung der Querachse erstellt. Wenn die Richtung beispielsweise Row ist, wird eine neue Zeile darunter hinzugefügt.
WrapReverse: Entspricht Wrap, mit dem Unterschied, dass die neue Zeile in der entgegengesetzten Richtung zur Querachse hinzugefügt wird. Wenn die Richtung beispielsweise Row ist, wird eine neue Zeile oberhalb hinzugefügt.

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

In der Zeile ist noch Platz für 100dp. Kind 1 ist 20dp. Es ist Platz vorhanden, also wird Kind 1 in die Zeile eingefügt.

In der Zeile ist noch Platz für 80dp. Die Lücke beträgt 8dp. Kind 2 ist 40dp. Der erforderliche Speicherplatz beträgt 48dp. Es ist Platz vorhanden, also werden die Lücke und Kind 2 in der Zeile platziert.

In der Zeile ist noch Platz für 32dp. 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 untergeordnetes Element 3 in einer neuen Zeile platziert.

Abstände zwischen Elementen hinzufügen

Mit rowGap und columnGap können Sie Abstände zwischen Zeilen und Spalten hinzufügen. Das ist nützlich, um zu vermeiden, dass untergeordneten Elementen Abstandsmodifikatoren hinzugefügt werden.

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.