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.11.0-beta01"

[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: Mit FlexBox werden zwei Text-Elemente zentriert angeordnet.

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

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

Beispiel 2: FlexBox umschließt fünf Elemente in zwei Zeilen und vergrößert sie ungleichmäßig, um den verfügbaren Platz in jeder Zeile zu füllen. Zwischen den Elementen ist sowohl vertikal als auch horizontal ein 8.dp-Abstand.

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

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