Erste Schritte mit FlexBox

Auf dieser Seite wird beschrieben, wie Sie einfache FlexBox-Layouts implementieren.

Projekt einrichten

  1. Fügen Sie die Bibliothek androidx.compose.foundation.layout der Datei lib.versions.toml Ihres Projekts hinzu.

    [versions]
compose = "1.13.0-alpha03"

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

  2. Fügen Sie die Bibliotheksabhängigkeit der Datei build.gradle.kts Ihrer App hinzu.

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

Einfache Flexbox-Layouts erstellen

Beispiel 1: FlexBox legt zwei Text-Elemente fest, die mittig ausgerichtet sind.

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

Übereinander gestapelte „Hello World“-Text-Composables in einer einfachen FlexBox-Implementierung.

Beispiel 2: FlexBox platziert fünf Elemente auf zwei Zeilen und vergrößert sie unterschiedlich, um den verfügbaren Platz in jeder Zeile zu füllen. Zwischen den Elementen besteht sowohl vertikal als auch horizontal eine Lücke von 8.dp.

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) })
}

Zwei Zeilen mit farbigen Elementen, wobei drei unterschiedlich große Elemente in der oberen Zeile und zwei unterschiedlich große Elemente in der unteren Zeile verteilt sind.

Weitere Informationen zum Verhalten von FlexBox finden Sie unter Containerverhalten festlegen und Elementverhalten festlegen.

Zurück
Übersicht
Weiter
Containerverhalten festlegen