Pierwsze kroki z FlexBox

Na tej stronie dowiesz się, jak wdrażać podstawowe układy FlexBox.

Konfigurowanie projektu

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

    [versions]
compose = "1.11.0-alpha06"

[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 zawiera 2 elementy Text, które są wyśrodkowane.

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 na 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 8.dp przerwa w pionie i w poziomie.

FlexBox(
    config = {
        wrap = FlexWrap.Wrap
        gap(8.dp)
    }
) {
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.width(350.dp).flex { grow = 1.0f })
    OrangeRoundedBox(modifier = Modifier.width(200.dp).flex { grow = 0.7f })
    PinkRoundedBox(modifier = Modifier.width(200.dp).flex { grow = 0.3f })
}
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 działania kontenera i Ustawianie działania elementu.

Wstecz
Przegląd
Dalej
Ustawianie działania kontenera