Premiers pas

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

Configurer le projet

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

   [versions]
   compose = "1.13.0-beta01"
   
   [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 une grille de base

L'exemple suivant crée une grille de base de 2 x 3, avec des colonnes et des lignes d'une taille fixe de 100.dp.

Grid(
    config = {
        repeat(2) {
            column(100.dp)
        }
        repeat(3) {
            row(100.dp)
        }
    }
) {
    Card1(containerColor = PastelRed)
    Card2(containerColor = PastelGreen)
    Card3(containerColor = PastelBlue)
    Card4(containerColor = PastelPink)
    Card5(containerColor = PastelOrange)
    Card6(containerColor = PastelYellow)
}
DefineGrid.kt

Pour savoir comment implémenter des grilles plus avancées, consultez Définir les propriétés du conteneur et Définir les propriétés des éléments.