Créer une grille à faire défiler

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)
        }
    }
}
LazyListSnippets.kt

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.
  • 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.
  • items(itemsList) ajoute itemsList à LazyHorizontalGrid. Le lambda affiche un composable Text 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 composable Text 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

Figure 1 Grille horizontale à faire défiler à l'aide de 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:

Les listes et les grilles permettent à votre application d'afficher des collections sous une forme visuellement attrayante et facile à utiliser pour les utilisateurs.
Collection de guides rapides
Découvrez comment les fonctions composables peuvent vous permettre de créer facilement de beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Collection de guides rapides
Cette série de vidéos présente différentes API Compose, vous montrant rapidement ce qui est disponible et comment les utiliser.
Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Envoyer des commentaires