Définir les propriétés du conteneur

Vous pouvez définir une configuration de conteneur de grille pour créer des mises en page flexibles qui s'adaptent à différentes tailles d'écran et différents types de contenu. Cette page explique comment effectuer les opérations suivantes :

• Définir une grille : configurez la structure de base des lignes et des colonnes.
• Placer des éléments dans une grille : découvrez comment les éléments sont placés dans les cellules de la grille et comment modifier le sens du flux.
• Gérer le dimensionnement des pistes : utilisez le dimensionnement fixe, en pourcentage, flexible et intrinsèque pour définir la taille des pistes.
• Définir des espaces : gérez les "gouttières" entre les lignes et les colonnes.

Définir une grille

Une grille est composée de colonnes et de lignes. Le Grid composable comporte un paramètre config qui accepte un lambda pour définir les colonnes et les lignes dans GridConfigurationScope. L'exemple suivant définit une grille comportant trois lignes et deux colonnes, chacune avec une taille fixe spécifiée en Dp :

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

Placer des éléments dans une grille

Grid prend les éléments d'interface utilisateur dans le lambda content et les place dans les cellules de la grille. La grille dispose les éléments, que vous ayez défini explicitement les lignes et les colonnes ou non. Par défaut, Grid tente de placer un élément d'interface utilisateur dans la cellule de grille disponible de la ligne. Si ce n'est pas possible, il le place dans une cellule de grille disponible de la ligne suivante. S'il n'y a pas de cellule vide, Grid crée une ligne.

Dans l'exemple suivant, la grille comporte six cellules et place une carte dans chacune d'elles (figure 1). Chaque cellule de la grille mesure 160dp x 90dp, ce qui porte la taille totale de la grille à 320dp x 270dp.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

Pour modifier ce comportement par défaut et remplir la grille par colonne, définissez la propriété flow sur GridFlow.Column.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

Gérer le dimensionnement des pistes

Les lignes et les colonnes sont collectivement appelées "piste de grille". Vous pouvez spécifier la taille d'une piste de grille à l'aide de l'une des méthodes suivantes :

• Fixe (Dp) : alloue une taille spécifique (par exemple, column(180.dp)).
• Pourcentage (Float) : alloue un pourcentage de l'espace disponible total de 0.0f à 1.0f (par exemple, row(0.5f) pour 50 %).
• Flexible (Fr) : distribue l'espace restant proportionnellement après le calcul des pistes fixes et en pourcentage. Par exemple, si deux lignes sont définies sur 1.fr et 3.fr, la seconde reçoit 75 % de la hauteur restante.
• Intrinsèque : dimensionne la piste en fonction du contenu qu'elle contient. Pour en savoir plus, consultez Déterminer la taille d'une piste de grille de manière intrinsèque.

L'exemple suivant utilise les différentes options de dimensionnement des pistes pour définir la hauteur des lignes :

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
GridTrackSize.kt

Déterminer la taille d'une piste de grille de manière intrinsèque

Vous pouvez utiliser le dimensionnement intrinsèque pour un Grid lorsque vous souhaitez que la mise en page s’adapte au contenu, plutôt que de le forcer dans un conteneur fixe. La taille de la piste de grille est déterminée par les valeurs suivantes :

• GridTrackSize.MaxContent: utilise la taille intrinsèque maximale du contenu (par exemple, la largeur est déterminée par la longueur totale du texte dans un bloc de texte sans retour à la ligne).
• GridTrackSize.MinContent: utilise la taille intrinsèque minimale du contenu (par exemple, la largeur est déterminée par le mot le plus long d'un bloc de texte).
• GridTrackSize.Auto: utilise une taille flexible pour une piste qui s'adapte en fonction de l'espace disponible. Par défaut, elle se comporte comme MaxContent, mais réduit et ajuste son contenu pour l'adapter au conteneur parent.

L'exemple suivant place deux textes côte à côte. La taille de la colonne du premier texte est déterminée par la largeur minimale requise pour afficher le texte, et la largeur de la deuxième colonne dépend de la largeur maximale requise du texte.

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}
GridTrackSize.kt

Définir des espaces entre les lignes et les colonnes

Une fois que vos pistes de grille sont dimensionnées, vous pouvez modifier l'espace de la grille pour affiner l'espacement entre les pistes. Vous pouvez spécifier l'espace entre les colonnes avec la columnGap fonction, et l'espace entre les lignes avec rowGap. Dans l'exemple suivant, il existe un espace de 16dp entre chaque ligne et un espace de 8dp entre chaque colonne (figure 5).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

Vous pouvez également utiliser la fonction pratique gap pour définir des espaces de même taille pour les colonnes et les lignes, et pour définir séparément la taille des colonnes et des espaces à l'aide d'une seule fonction. Le code suivant ajoute des espaces de 8dp à la grille :

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt