0Pricing
Android Academy · Leçon

Pagination dans les listes Compose

Affichez des données paginées avec LazyColumn.

Pagination dans les listes Compose est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.

Afficher des données paginées dans Compose

La couche de données vous fournit un Flow<PagingData<Article>>. La bibliothèque paging-compose transforme ce flux en un objet qu’un LazyColumn peut afficher, avec le chargement à la demande pendant le défilement.

Le pont essentiel est collectAsLazyPagingItems().

collectAsLazyPagingItems

Appelez collectAsLazyPagingItems() sur le flux à l’intérieur d’un composable. Cette fonction renvoie un objet LazyPagingItems qui suit les éléments chargés et les états de chargement, et recompose l’interface utilisateur à mesure que les pages arrivent.

import androidx.paging.compose.collectAsLazyPagingItems

@Composable
fun ArticleScreen(viewModel: ArticleViewModel) {
    val articles = viewModel.articles.collectAsLazyPagingItems()
    ArticleList(articles)
}

items() avec LazyPagingItems

À l’intérieur d’un LazyColumn, utilisez la surcharge Paging de items(). Elle lit les données de LazyPagingItems et déclenche le chargement de la page suivante lorsque l’utilisateur approche de la fin.

Chaque élément peut être null lorsque les emplacements réservés sont activés : gérez donc ce cas.

import androidx.compose.foundation.lazy.LazyColumn
import androidx.paging.compose.LazyPagingItems
import androidx.paging.compose.items

@Composable
fun ArticleList(articles: LazyPagingItems<Article>) {
    LazyColumn {
        items(articles) { article ->
            if (article != null) {
                ArticleRow(article)
            }
        }
    }
}

Des clés stables pour les éléments

Attribuez à chaque ligne une clé stable afin que Compose puisse suivre efficacement les éléments lors du chargement des pages et éviter les recompositions inutiles.

Utilisez l’utilitaire Paging itemKey avec une propriété unique et stable, telle que l’identifiant de l’élément.

import androidx.paging.compose.itemKey

LazyColumn {
    items(
        count = articles.itemCount,
        key = articles.itemKey { it.id }
    ) { index ->
        val article = articles[index]
        if (article != null) ArticleRow(article)
    }
}

Lire les états de chargement

LazyPagingItems.loadState expose l’état actuel du chargement et des erreurs pour trois opérations :

  • refresh - le chargement initial ou l’actualisation par balayage
  • append - le chargement de la page suivante (défilement vers le bas)
  • prepend - le chargement de la page précédente (défilement vers le haut)
import androidx.paging.LoadState

val refresh = articles.loadState.refresh
val append = articles.loadState.append

val isInitialLoading = refresh is LoadState.Loading
val isLoadingMore = append is LoadState.Loading

Chargement en plein écran et états vides

Utilisez l’état refresh pour gérer la première impression : un indicateur centré pendant le chargement, une vue d’erreur en cas d’échec ou un message vide lorsqu’il n’y a rien à afficher.

when (val refresh = articles.loadState.refresh) {
    is LoadState.Loading -> FullScreenSpinner()
    is LoadState.Error -> FullScreenError(
        message = refresh.error.message,
        onRetry = { articles.retry() }
    )
    is LoadState.NotLoading -> {
        if (articles.itemCount == 0) EmptyState()
        else ArticleList(articles)
    }
}

Indicateur en bas pendant l’ajout

Pour afficher un petit indicateur en bas pendant le chargement de la page suivante, ajoutez un élément supplémentaire au LazyColumn en fonction de l’état de chargement append.

LazyColumn {
    items(count = articles.itemCount, key = articles.itemKey { it.id }) { index ->
        articles[index]?.let { ArticleRow(it) }
    }

    if (articles.loadState.append is LoadState.Loading) {
        item {
            Box(Modifier.fillMaxWidth().padding(16.dp), Alignment.Center) {
                CircularProgressIndicator()
            }
        }
    }
}

Nouvelle tentative en cas d’erreur

Lorsqu’un ajout échoue, affichez une ligne de nouvelle tentative en bas. L’appel à articles.retry() ne retente que le chargement échoué : il ne recharge pas la liste entière.

val append = articles.loadState.append
if (append is LoadState.Error) {
    item {
        Row(Modifier.fillMaxWidth().padding(16.dp), Arrangement.Center) {
            Text("Couldn't load more")
            Spacer(Modifier.width(8.dp))
            Button(onClick = { articles.retry() }) { Text("Retry") }
        }
    }
}

Actualiser par balayage

Déclenchez un nouveau chargement avec articles.refresh(). Combinez-le avec l’actualisation par balayage de Material 3, en pilotant l’indicateur depuis l’état de chargement refresh.

import androidx.compose.material3.pulltorefresh.PullToRefreshBox

val isRefreshing = articles.loadState.refresh is LoadState.Loading
PullToRefreshBox(
    isRefreshing = isRefreshing,
    onRefresh = { articles.refresh() }
) {
    ArticleList(articles)
}

En-tête et séparateurs

Vous pouvez librement mélanger des éléments paginés avec du contenu non paginé dans le même LazyColumn. Ajoutez un en-tête fixe, une barre de recherche ou des séparateurs de section autour de l’appel paginé à items().

Comme tout se trouve dans un seul LazyColumn, le défilement reste unifié et fluide.

LazyColumn {
    item { SearchBar(query, onQueryChange) }

    items(count = articles.itemCount, key = articles.itemKey { it.id }) { index ->
        val article = articles[index]
        if (article != null) {
            ArticleRow(article)
            HorizontalDivider()
        }
    }

    if (articles.loadState.append.endOfPaginationReached) {
        item { Text("You're all caught up", Modifier.padding(16.dp)) }
    }
}

Prévisualiser des listes paginées

Pour les aperçus Compose et les tests, vous n’avez pas besoin d’un véritable réseau. Encapsulez des données d’exemple dans PagingData.from(...) et exposez-les sous forme de flux.

Vous pouvez ainsi créer et prévisualiser l’interface de votre liste de manière isolée.

import androidx.paging.PagingData
import kotlinx.coroutines.flow.flowOf

@Preview
@Composable
fun ArticleListPreview() {
    val sample = listOf(Article(1, "Hello"), Article(2, "World"))
    val flow = flowOf(PagingData.from(sample))
    ArticleList(flow.collectAsLazyPagingItems())
}

Vérification rapide

Quelle fonction convertit un Flow<PagingData> en un objet qu’un LazyColumn Compose peut afficher ?

Récapitulatif&nbsp;: Paging dans Compose

Vous avez affiché des données paginées dans Jetpack Compose :

  • collectAsLazyPagingItems() fait le lien entre le flux et l’interface utilisateur
  • La surcharge Paging de items() charge davantage d’éléments pendant le défilement ; gérez les emplacements réservés null
  • Utilisez itemKey { it.id } pour obtenir des clés stables
  • loadState.refresh/append/prepend pilotent les indicateurs, les erreurs et les états vides
  • retry() et refresh() permettent de récupérer après les échecs et de recharger les données

Ensuite : combiner le réseau et la base de données avec RemoteMediator.

Questions Fréquemment Posées

La leçon « Pagination dans les listes Compose » est-elle gratuite ?

Oui — le texte complet de « Pagination dans les listes Compose » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Pagination dans les listes Compose » ?

Affichez des données paginées avec LazyColumn. Tu pratiques Android Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Android Academy ?

Aucune expérience préalable n'est requise. Android Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Pagination dans les listes Compose » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Android Academy ?

Oui. Chaque leçon Android Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Pourquoi utiliser la pagination
  2. PagingSource et Pager
  3. Pagination dans les listes Compose
  4. RemoteMediator et mise en cache
← Retour à Android Academy