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 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 d'ensembles de données volumineux et 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 :
| 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 la terminologie suivante 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 située après la dernière ligne. Dans l'image suivante, chaque ligne pointillée 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 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.
Espace entre les éléments de la grille
Un espacement de grille est la gouttière entre les pistes de la grille. Vous ne pouvez pas placer un élément d'interface utilisateur dans un espace, mais vous pouvez l'étendre sur cet espace.
