Charger des données de manière paresseuse avec des listes et la pagination

Avec le chargement paresseux et Paging, vous pouvez prendre en charge de grandes listes d'éléments (y compris une liste infinie) dans votre application en chargeant et en affichant les données de manière incrémentielle. Cette technique vous permet de réduire les temps de chargement initiaux et d'optimiser l'utilisation de la mémoire, ce qui améliore les performances.

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

Afficher du contenu paginé

Avec la bibliothèque Paging, vous pouvez charger et afficher des pages de données depuis un ensemble de données plus volumineux, à partir d'un espace de stockage local ou sur réseau. Utilisez le code suivant pour afficher une liste paginée qui affiche une barre de progression pour indiquer à l'utilisateur que d'autres données sont en cours d'extraction:

@Composable
fun MessageList(
    modifier: Modifier,
    pager: Pager<Int, Message>
) {
    val lazyPagingItems = pager.flow.collectAsLazyPagingItems()

    LazyColumn {
        items(
            lazyPagingItems.itemCount,
            key = lazyPagingItems.itemKey { it.id }
        ) { index ->
            val message = lazyPagingItems[index]
            if (message != null) {
                MessageRow(message)
            } else {
                MessagePlaceholder()
            }
        }
    }
    @Composable
    fun MessagePlaceholder(modifier: Modifier) {
        Box(
            Modifier
                .fillMaxWidth()
                .height(48.dp)
        ) {
            CircularProgressIndicator()
        }
    }

    @Composable
    fun MessageRow(
        modifier: Modifier,
        message: Message
    ) {
        Card(modifier = Modifier.padding(8.dp)) {
            Column(
                modifier = Modifier.padding(8.dp),
                verticalArrangement = Arrangement.Center
            ) {
                Text(message.sender)
                Text(message.text)
            }
        }
    }
}
LazyListSnippets.kt

Points clés concernant le code

  • LazyColumn: ce composable permet d'afficher efficacement une longue liste d'éléments (messages). Il n'affiche que les éléments visibles à l'écran, ce qui permet d'économiser des ressources et de la mémoire.
  • L'objet lazyPagingItems gère efficacement le chargement et la présentation des données paginées dans LazyColumn. Il transmet LazyPagingItems à items dans le composable LazyColumn.
  • MessageRow(message: Text) est responsable de l'affichage des éléments de message individuels, qui affichent probablement l'expéditeur et le texte du message dans une carte.
  • MessagePlaceholder() fournit un espace réservé visuel (un voyant de chargement) pendant la récupération des données de message réelles, ce qui améliore l'expérience utilisateur.

Résultats

La vidéo suivante montre le comportement d'une grande liste qui extrait des données lorsque l'utilisateur fait défiler l'écran.

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