Erste Schritte mit FlexBox

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

Projekt einrichten

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

    [versions]
compose = "1.13.0-beta01"

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

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

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

Einfache FlexBox-Layouts erstellen

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

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

„Hello World“-Text-Composables, die in einer einfachen FlexBox-Implementierung übereinander gestapelt sind.

Beispiel 2: FlexBox bricht fünf Elemente auf zwei Zeilen um und vergrößert sie ungleichmäßig, um den verfügbaren Platz in jeder Zeile zu füllen. Zwischen den Elementen gibt es sowohl vertikal als auch horizontal einen Abstand 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.