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-alpha06"

[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 bricht fünf Elemente in zwei Zeilen um 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)
    }
) {
    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. In der oberen Zeile sind drei unterschiedlich große Elemente und in der unteren Zeile zwei unterschiedlich große Elemente angeordnet.

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

Zurück
Übersicht
Weiter
Containerverhalten festlegen