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 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 placer des éléments dans des cellules de grille et comment modifier le sens de flux.
• Gérer la taille des pistes : utilisez des tailles fixes, fractionnaires, flexibles et intrinsèques pour définir la taille des pistes.
• Définir les espaces : gérez les "gouttières" entre les lignes et les colonnes.

Définir une grille

Une grille se compose de colonnes et de lignes. Le composable Grid 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 dans 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 des cellules de grille. La grille organise les éléments, que vous ayez ou non défini explicitement les lignes et les colonnes. 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. Si aucune cellule n'est 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 le tableau 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 la taille 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)).
• Fractionnel (Float) : alloue un pourcentage de l'espace total disponible, de 0.0f à 1.0f (par exemple, row(0.5f) pour 50 %).
• Flexible (Fr) : distribue l'espace restant de manière proportionnelle après le calcul des pistes fixes et fractionnaires. 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 intrinsèquement la taille des pistes de la grille.

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 intrinsèquement la taille des pistes de grille

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 : utilisez 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 : utilisez une taille flexible pour une piste qui s'adapte en fonction de l'espace disponible. Il se comporte comme MaxContent par défaut, mais réduit et encapsule son contenu pour l'adapter au conteneur parent.

L'exemple suivant place deux textes côte à côte. La taille de la première colonne de texte est déterminée par la largeur minimale requise pour afficher le texte, tandis que la largeur de la deuxième colonne dépend de la largeur maximale requise pour le 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 la taille de vos pistes de grille définie, vous pouvez modifier l'espacement de la grille pour affiner l'espacement entre les pistes. Vous pouvez spécifier l'espace entre les colonnes avec la fonction columnGap 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 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