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

Une grille se compose 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)
        }
    }
) {
}

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()
}

Six cartes sont placées dans une grille de trois lignes et deux colonnes.
Figure 1. Six cartes sont placées dans une grille comportant trois lignes et deux colonnes.

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()
}

La fonction de flux modifie la direction dans laquelle les éléments sont placés.
Figure 2. GridFlow.Row (à gauche) et GridFlow.Column (à droite).

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)")
        PastelGreenCard("Percentage(0.2f)")
    PastelBlueCard("Flex(1.fr)")
        PastelYellowCard("Auto")

}

Hauteurs de ligne définies à l'aide des quatre options principales de dimensionnement des pistes.
Figure 3. Hauteur des lignes définie à l'aide des quatre options principales de dimensionnement des pistes dans Grid.

Définir la taille minimale des pistes de grille flexibles

Lorsqu'un conteneur de grille ne dispose plus d'espace, une piste flexible standard peut être réduite à 0.dp. Pour éviter cela et vous assurer que le contenu n'est pas écrasé, utilisez GridTrackSize.MinMax pour appliquer une taille minimale explicite tout en conservant la flexibilité de la piste.

L'exemple suivant alloue au moins 100.dp à la première ligne :

Grid(
    config = {
        column(1f)
        // The first row has a minimum height of 100.dp and can expand to 
        // the half of the remaining space.
        row(GridTrackSize.MinMax(100.dp, 1.fr))
        // The second row takes the half of the remaining space.
        row(1.fr)
        // The third row has a fixed height of 200.dp.
        row(200.dp)
    },
    modifier = Modifier.size(360.dp) // Total grid height is 360.dp
) {
    PastelRedCard("MinMax(100.dp, 1.fr)")
        PastelGreenCard("Flex(1.fr)")
    PastelBlueCard("Fixed(200.dp)")
}

Hauteurs de ligne définies à l'aide des quatre options principales de dimensionnement des pistes.
Figure 4. La première ligne a une hauteur d'au moins 100.dp.

Définir la taille minimale de la piste de grille pour placer des listes paresseuses

Les pistes flexibles standards interrogent automatiquement les tailles intrinsèques de leurs enfants pour établir une taille de base. Toutefois, Jetpack Compose interdit d'interroger les tailles intrinsèques de SubcomposeLayout, qui prend en charge des composants, tels que LazyColumn et LazyRow.

Le placement d'une liste paresseuse dans une piste flexible standard provoque un IllegalStateException plantage. Pour placer en toute sécurité des listes paresseuses dans une piste de grille flexible, utilisez MinMax avec une taille minimale explicite (par exemple, 0.dp) pour contourner la passe de mesure intrinsèque.

Grid(
    config = {
        column(1f)
        // The first row's height is determined by the height of the Text composable.
        row(GridTrackSize.Auto)
        // The second row occupies the remaining space, allowing the LazyColumn to scroll.
        row(GridTrackSize.MinMax(0.dp, 1.fr))

        gap(8.dp)
    },
    modifier = Modifier.size(width = 170.dp, height = 240.dp)
) {
    Text("Lazy column in a Grid")
    // The LazyColumn is placed in the second row, filling the remaining space.
    LazyColumn(verticalArrangement = Arrangement.spacedBy(4.dp)) {
        items(100) { number ->
            PastelGreenCard("Card $number")
        }
    }
}

Hauteurs de ligne définies à l'aide des quatre options principales de dimensionnement des pistes.
Figure 5. LazyColumn dans une cellule de grille.

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.")
}

Tailles intrinsèques spécifiées dans les colonnes.
Figure 5. Tailles intrinsèques spécifiées dans les colonnes.

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'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 y a 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()
}

Espaces entre les lignes et les colonnes.
Figure 6. Espaces entre les lignes et les colonnes.

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()
}