Premiers pas avec FlexBox

Cette page explique comment implémenter des mises en page FlexBox de base.

Configurer un projet

1. Ajoutez la androidx.compose.foundation.layout bibliothèque au fichier lib.versions.toml de votre projet.

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

2. Ajoutez la dépendance de bibliothèque au fichier build.gradle.kts de votre application.

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

Créer des mises en page FlexBox de base

Exemple 1 : FlexBox dispose deux éléments Text alignés au centre.

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

Exemple 2 : FlexBox place cinq éléments sur deux lignes et les agrandit de manière inégale pour remplir l'espace disponible sur chaque ligne. Un espace de 8.dp est présent entre les éléments, à la fois verticalement et horizontalement.

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

Pour en savoir plus sur le comportement de FlexBox, consultez Définir le comportement du conteneur et Définir le comportement de l'élément.