Ustawianie działania kontenera

Aby skonfigurować działanie 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 zdefiniować kierunek układu, zawijanie, wyrównanie i odstępy między elementami.

Kierunek układu

Funkcja direction ustawia oś główną, która określa kierunek rozmieszczenia elementów. Może mieć te wartości:

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

Wyrównywanie elementów i rozdzielanie dodatkowego miejsca

W sekcjach poniżej znajdziesz opis wyrównywania elementów i rozmieszczania dodatkowego miejsca wzdłuż osi głównej i osi poprzecznej.

Wzdłuż głównej osi

Użyj justifyContent, aby rozmieścić elementy wzdłuż głównej osi. W poniższej tabeli znajdziesz opis działania w przypadku kierunku Row.

Start
Center
End
SpaceBetween
SpaceAround
SpaceEvenly

Wzdłuż osi poprzecznej

Użyj 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.

Poniższe obrazy pokazują, jak to działa, gdy kierunek to Row:

	Start	End	Center	Stretch	Baseline

Użyj alignContent, aby wyrównać wiersze do osi poprzecznej i rozmieścić dodatkową przestrzeń między wierszami. Ta właściwość ma zastosowanie tylko wtedy, gdy jest wiele wierszy (zawijanie jest włączone). Poniższe obrazy pokazują zachowanie, gdy kierunek to Row:

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

Pakowanie produktów

Zawijanie umożliwia FlexBox kontenerowi zajmowanie wielu wierszy, przenosząc elementy, które się nie mieszczą, do nowego wiersza lub kolumny wzdłuż osi poprzecznej. Skonfiguruj działanie zawijania za pomocą wrap.

Wartość FlexWrap	Przykład z użyciem kierunku Row
NoWrap (domyślnie): zapobiega zawijaniu elementów. Jeśli rozmiar główny jest niewystarczający, elementy są przepełnione.
Wrap: gdy nie ma wystarczająco dużo miejsca na element (plus odstęp), w kierunku osi poprzecznej tworzony jest nowy wiersz. Jeśli na przykład kierunek to Row, nowy wiersz jest dodawany poniżej.
WrapReverse: tak samo jak Wrap, z tym że 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, a właściwość wrap jest ustawiona na FlexWrap.Wrap i ma odstęp 8dp. Zawiera 3 elementy z odpowiednio basis 20dp, 40dp i 50dp.

W wierszu jest 100dp wolnego miejsca. Dziecko 1 to 20dp. Jest miejsce, więc Dziecko 1 zostaje umieszczone w kolejce.

W wierszu jest 80dp wolnego miejsca. Odstęp wynosi 8dp. Element 2 to 40dp. Wymagane miejsce to 48dp. Jest wystarczająco dużo miejsca, więc odstęp i element 2 są umieszczane w wierszu.

W wierszu jest 32dp wolnego miejsca. Odstęp wynosi 8dp. Element podrzędny 3 to 50dp. Wymagana przestrzeń 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, używając rowGap i columnGap. Jest to przydatne, aby uniknąć dodawania do elementów podrzędnych modyfikatorów odstępów.

rowGap dodaje odstęp pionowy między elementami i wierszami.	columnGap dodaje odstęp poziomy między elementami i wierszami.	gap to funkcja pomocnicza, która dodaje zarówno columnGap, jak i rowGap.