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-alpha03"
   
   [libraries]
   androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "compose" }
   

2. Ajoutez la dépendance de la 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 2x3, avec des colonnes et des lignes de taille fixe 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

Figure 1. Une grille de base est constituée de lignes et de colonnes de taille fixe.

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.