Inizia a utilizzare FlexBox

Questa pagina descrive come implementare layout FlexBox di base.

Configurare il progetto

  1. Aggiungi la libreria androidx.compose.foundation.layout al file lib.versions.toml del tuo progetto.

    [versions]
compose = "1.12.0-alpha01"

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

  2. Aggiungi la dipendenza della libreria al file build.gradle.kts della tua app.

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

Creare layout FlexBox di base

Esempio 1: FlexBox dispone due elementi Text allineati centralmente.

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

Componenti componibili di testo Hello World impilati uno sopra l'altro in un'implementazione FlexBox di base.

Esempio 2: FlexBox dispone cinque elementi su due righe e li espande in modo non uniforme per riempire lo spazio disponibile su ogni riga. Tra gli elementi è presente uno spazio di 8.dp, sia in verticale che in orizzontale.

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

Due righe di elementi colorati, con tre elementi di dimensioni diverse distribuiti nella riga superiore e due elementi di dimensioni diverse nella riga inferiore.

Per scoprire di più sul comportamento di FlexBox, consulta Impostare il comportamento del contenitore e Impostare il comportamento degli elementi.

Indietro
Panoramica
Avanti
Imposta il comportamento del contenitore