Vous pouvez gérer de grands ensembles de données et du contenu dynamique avec des grilles lentes, ce qui améliore les performances de l'application. Avec les composables de grille différée, vous pouvez afficher des éléments dans un conteneur à faire défiler, s'étendant sur plusieurs colonnes ou lignes.
Compatibilité des versions
Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.
Dépendances
Déterminer l'orientation de la grille
Les composables LazyHorizontalGrid
et LazyVerticalGrid
permettent d'afficher des éléments dans une grille. Une grille verticale différée affiche ses éléments dans un conteneur à faire défiler verticalement, s'étendant sur plusieurs colonnes, tandis que les grilles horizontales différées ont le même comportement sur l'axe horizontal.
Créer une grille à faire défiler
Le code suivant crée une grille à défilement horizontal avec trois colonnes:
@Composable fun ScrollingGrid() { val itemsList = (0..15).toList() val itemModifier = Modifier .border(1.dp, Color.Blue) .width(80.dp) .wrapContentSize() LazyHorizontalGrid( rows = GridCells.Fixed(3), horizontalArrangement = Arrangement.spacedBy(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp) ) { items(itemsList) { Text("Item is $it", itemModifier) } item { Text("Single item", itemModifier) } } }
Points clés concernant le code
- Le composable
LazyHorizontalGrid
détermine l'orientation horizontale de la grille.- Pour créer une grille verticale, utilisez plutôt
LazyVerticalGrid
.
- Pour créer une grille verticale, utilisez plutôt
- La propriété
rows
spécifie comment organiser le contenu de la grille.- Pour une grille verticale, utilisez la propriété
columns
pour spécifier la disposition.
- Pour une grille verticale, utilisez la propriété
items(itemsList)
ajouteitemsList
àLazyHorizontalGrid
. Le lambda affiche un composableText
pour chaque élément et définit le texte sur la description de l'élément.item()
ajoute un seul élément àLazyHorizontalGrid
, tandis que le lambda affiche un seul composableText
de manière similaire àitems()
.GridCells.Fixed
définit le nombre de lignes ou de colonnes.Pour créer une grille avec autant de lignes que possible, définissez le nombre de lignes à l'aide de
GridCells.Adaptive
.Dans le code suivant, la valeur
20.dp
spécifie que chaque colonne doit mesurer au moins 20 dp et que toutes les colonnes ont la même largeur. Si l'écran fait 88 dp de large, il comporte quatre colonnes de 22 dp chacune.
Résultats
LazyHorizontalGrid
.Collections contenant ce guide
Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=fr)
Afficher une liste ou une grille
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=fr)
Afficher des composants interactifs
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=fr)