Erste Schritte mit FlexBox

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

Projekt einrichten

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

    [versions]
compose = "1.11.0-beta02"

[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 Anwendung 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)
}
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 besteht ein Abstand von 8.dp in vertikaler und horizontaler Richtung.

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) })
}
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 angeordnet sind.

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

Zurück
Übersicht
Weiter
Containerverhalten festlegen