Pierwsze kroki z FlexBox

Na tej stronie dowiesz się, jak implementować podstawowe układy FlexBox.

Konfigurowanie projektu

  1. Dodaj bibliotekę androidx.compose.foundation.layout do pliku lib.versions.toml projektu.

    [versions]
compose = "1.12.0-alpha01"

[libraries]
androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "compose" }

  2. Dodaj zależność biblioteki do pliku build.gradle.kts aplikacji.

    dependencies {
    implementation(libs.androidx.compose.foundation.layout)
}

Tworzenie podstawowych układów FlexBox

Przykład 1: FlexBox układa 2 elementy Text wyrównane do środka.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        alignItems(FlexAlignItems.Center)
    }
) {
    Text(text = "Hello", fontSize = 48.sp)
    Text(text = "World!", fontSize = 48.sp)
}
FlexBoxSnippets.kt

Komponenty kompozycyjne z tekstem „Hello World” ułożone jeden nad drugim w podstawowej implementacji FlexBox.

Przykład 2: FlexBox zawija 5 elementów w 2 wierszach i powiększa je nierównomiernie aby wypełnić dostępne miejsce w każdym wierszu. Między elementami jest odstęp 8.dp zarówno w pionie, jak i w poziomie.

FlexBox(
    config = {
        wrap(FlexWrap.Wrap)
        gap(8.dp)
    }
) {
    // All boxes have an intrinsic width of 100.dp
    // Some grow to fill any remaining space on the row.
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.flex { grow(1.0f) })
    OrangeRoundedBox(modifier = Modifier.flex { grow(1.0f) })
    PinkRoundedBox(modifier = Modifier.flex { grow(1.0f) })
}
FlexBoxSnippets.kt

Dwa rzędy kolorowych elementów. W górnym rzędzie znajdują się 3 elementy o różnych rozmiarach, a w dolnym – 2 elementy o różnych rozmiarach.

Więcej informacji o działaniu FlexBox znajdziesz w artykułach Ustawianie zachowania kontenera i Ustawianie zachowania elementu.

Wstecz
Przegląd
Dalej
Ustawianie działania kontenera