Grid est une API Jetpack Compose qui vous permet d'implémenter de manière flexible une mise en page bidimensionnelle.
Cette API vous permet d'afficher des éléments dans des mises en page à plusieurs colonnes ou à plusieurs lignes qui s'adaptent à la taille du conteneur disponible.
Grid.
En quoi Grid est-il différent des composables similaires ?
Compose propose déjà des composants similaires, tels que LazyVerticalGrid.
Ces composants sont principalement destinés à la visualisation de grands ensembles de données homogènes, par exemple pour afficher un catalogue de contenus dans une application de streaming vidéo. Ils ne sont PAS conçus pour la mise en page structurelle d'un écran ou d'un composant complexe.
Vous pouvez également implémenter une mise en page bidimensionnelle en combinant plusieurs composables Row et Column.
Toutefois, cette approche présente certains inconvénients, tels que des hiérarchies profondes et des difficultés d'adaptabilité.
Le tableau suivant présente les mises en page adaptées à chaque API :
| Composant | Objectif |
|---|---|
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid |
Visualisation d'ensembles de données volumineux et homogènes nécessitant un chargement différé. |
Row, Column, FlexBox |
Mise en page unidimensionnelle |
Grid |
Mise en page bidimensionnelle |
Terminologie
Familiarisez-vous avec les termes suivants pour comprendre le fonctionnement de Grid.
Ligne de la grille
Une grille est composée de lignes horizontales et verticales. Si votre grille comporte trois lignes, elle comporte quatre lignes horizontales, y compris celle après la dernière ligne. Dans l'image suivante, chaque ligne en pointillés représente une ligne de la grille :
Piste de grille
Une piste de grille est l'espace entre deux lignes de grille. Une piste de ligne se trouve entre deux lignes horizontales, et une piste de colonne se trouve entre deux lignes verticales. Pour définir la taille de ces pistes, attribuez-leur une taille lorsque vous créez la grille.
Cellule de grille
Une cellule de grille est l'intersection d'une ligne et d'une colonne.
Zone de la grille
Une zone de grille se compose de plusieurs cellules de grille. Vous pouvez définir une zone de grille en faisant en sorte qu'un élément s'étende sur plusieurs pistes.
Espacement de la grille
Un espace de grille est une gouttière entre les pistes de grille. Vous ne pouvez pas placer d'élément d'interface utilisateur dans un espace vide, mais vous pouvez l'étendre sur celui-ci.
