Grid est une API Jetpack Compose qui vous permet d'implémenter de manière flexible une mise en page bidimensionnelle.
Avec cette API, vous pouvez 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.
Cependant, cette approche présente certains inconvénients, tels que des hiérarchies profondes et des difficultés d'adaptation.
Le tableau suivant présente les mises en page adaptées à chaque API :
| Component | Objectif |
|---|---|
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid |
Visualisation de grands ensembles de données homogènes nécessitant un chargement différé. |
Row, Column, FlexBox |
Mise en page unidimensionnelle |
Grid |
Mise en page bidimensionnelle |
Terminologie
Familiarisez-vous avec la terminologie suivante pour comprendre le fonctionnement de Grid.
Ligne de 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 qui suit la dernière ligne. Dans l'image suivante, chaque ligne en pointillés représente une ligne de 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 piste de ligne et d'une piste de colonne.
Zone de grille
Une zone de grille est constituée 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 espacement de la grille est la gouttière entre les pistes de la grille. Vous ne pouvez pas placer d'élément d'interface utilisateur dans un espacement, mais vous pouvez l'étendre sur celui-ci.
