Ustawianie działania kontenera

Aby skonfigurować zachowanie kontenera FlexBox, utwórz blok FlexBoxConfig i podaj go za pomocą parametru config.

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

Użyj FlexBoxConfig, aby określić kierunek układu, zachowanie zawijania, wyrównanie i odstępy między elementami.

Kierunek układu

Funkcja direction ustawia oś główną, która określa kierunek układu elementów. Może mieć następujące wartości:

• Row (domyślna): ustawia oś główną jako poziomą. W językach pisanych od lewej do prawej będzie to od lewej do prawej, a w językach pisanych od prawej do lewej – odwrotnie.
• RowReverse: odwraca kierunek Row.
• Column: ustawia oś główną jako pionową, od góry do dołu.
• ColumnReverse: odwraca kierunek Column.

Wyrównywanie elementów i rozmieszczanie dodatkowego miejsca

W poniższych sekcjach opisano, jak wyrównywać elementy i rozmieszczać dodatkowe miejsce wzdłuż osi głównej i poprzecznej.

Wzdłuż głównej osi

Użyj justifyContent, aby rozmieścić elementy wzdłuż głównej osi. W tabeli poniżej pokazano, jak zachowuje się system, gdy kierunek to Row.

Start
Center
End
SpaceBetween
SpaceAround
SpaceEvenly

Wzdłuż osi poprzecznej

Użyj właściwości alignItems, aby wyrównać elementy wzdłuż osi poprzecznej w jednym wierszu. To zachowanie można zastąpić w przypadku poszczególnych elementów za pomocą modyfikatora alignSelf.

Te obrazy pokazują, co się dzieje, gdy kierunek to Row:

	Start	End	Center	Stretch	Baseline

Użyj alignContent, aby wyrównać linie do osi poprzecznej i rozłożyć dodatkowe miejsce między liniami. Ta właściwość ma zastosowanie tylko wtedy, gdy jest wiele wierszy (zawijanie jest włączone). Te obrazy pokazują, jak zachowuje się interfejs, gdy kierunek to Row:

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

Zapakuj elementy

Zawijanie umożliwia kontenerowi FlexBox wyświetlanie wielu wierszy i przenoszenie elementów, które nie mieszczą się w nowym wierszu lub kolumnie, wzdłuż osi poprzecznej. Skonfiguruj zachowanie zawijania za pomocą wrap.

Wartość FlexWrap	Przykład użycia kierunku Row
NoWrap (domyślna): uniemożliwia zawijanie elementów. Elementy przepełniają się, jeśli główny rozmiar jest niewystarczający.
Wrap: gdy nie ma wystarczającej ilości miejsca na element (oraz odstęp), tworzony jest nowy wiersz w kierunku osi poprzecznej. Jeśli na przykład kierunek to Row, nowy wiersz zostanie dodany poniżej.
WrapReverse: tak samo jak Wrap, ale nowy wiersz jest dodawany w kierunku przeciwnym do osi poprzecznej. Jeśli na przykład kierunek to Row, nowy wiersz zostanie dodany powyżej.

Poniższy przykład pokazuje, jak działa algorytm zawijania FlexBox. Kontener FlexBox ma główny rozmiar 100dp, właściwość wrap ustawioną na FlexWrap.Wrap i odstęp 8dp. Zawiera 3 elementy z odpowiednio basis 20dp, 40dp i 50dp.

W wierszu jest dostępne miejsce na 100dp znak. Dziecko 1 to 20dp. Jest miejsce, więc dziecko 1 zostaje umieszczone w kolejce.

W wierszu jest dostępne miejsce na 80dp znak. Różnica wynosi 8dp. Dziecko 2 ma 40dp lat. Wymagana ilość miejsca to 48dp. Jest miejsce, więc odstęp i element podrzędny 2 są umieszczane w wierszu.

W wierszu jest 32dp wolnego miejsca. Różnica wynosi 8dp. Dziecko 3 ma 50dp lat. Wymagana ilość miejsca to 58dp. W bieżącym wierszu nie ma wystarczająco dużo miejsca, więc element podrzędny 3 jest umieszczany w nowym wierszu.

Dodawanie odstępów między elementami

Dodaj odstępy między wierszami i kolumnami za pomocą właściwości rowGap i columnGap. Jest to przydatne, aby uniknąć dodawania modyfikatorów odstępów do elementów podrzędnych.

rowGap dodaje odstęp w pionie między elementami i wierszami.	columnGap dodaje poziome odstępy między elementami i wierszami.	gap to funkcja o uproszczonym zapisie, która dodaje zarówno columnGap, jak i rowGap.