Android Academy · Lezione

Paging nelle liste Compose

Visualizzi dati paginati con LazyColumn

Paging nelle liste Compose è una lezione Android Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Android Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Android Academy include 4 lezioni in totale.

Visualizzare dati paginati in Compose

Il livello dati fornisce un Flow<PagingData<Article>>. La libreria paging-compose converte questo flow in qualcosa che un LazyColumn può visualizzare, con caricamento su richiesta durante lo scorrimento.

Il collegamento fondamentale è collectAsLazyPagingItems().

collectAsLazyPagingItems

Chiami collectAsLazyPagingItems() sul flow all'interno di un composable. Restituisce un oggetto LazyPagingItems che tiene traccia degli elementi caricati e degli stati di caricamento, ricomponendo l'interfaccia utente quando arrivano nuove pagine.

import androidx.paging.compose.collectAsLazyPagingItems

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

items() con LazyPagingItems

All'interno di un LazyColumn, utilizzi l'overload Paging di items(). Questo legge da LazyPagingItems e attiva il caricamento della pagina successiva quando l'utente si avvicina alla fine.

Ogni elemento può essere null quando i segnaposto sono abilitati, quindi gestisca anche questo caso.

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)
            }
        }
    }
}

Chiavi stabili per gli elementi

Assegni a ogni riga una chiave stabile, così Compose può tenere traccia in modo efficiente degli elementi durante il caricamento delle pagine ed evitare ricomposizioni non necessarie.

Utilizzi l'helper Paging itemKey con una proprietà unica e stabile, come l'id dell'elemento.

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)
    }
}

Leggere gli stati di caricamento

LazyPagingItems.loadState espone lo stato corrente di caricamento e di errore per tre operazioni:

refresh - il caricamento iniziale o tramite trascinamento verso il basso
append - il caricamento della pagina successiva (scorrimento verso il basso)
prepend - il caricamento della pagina precedente (scorrimento verso l'alto)

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

Stati di caricamento a schermo intero e di elenco vuoto

Utilizzi lo stato refresh per gestire la prima schermata: un indicatore centrato durante il caricamento, una schermata di errore in caso di problemi oppure un messaggio di elenco vuoto quando non c'è nulla da visualizzare.

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)
    }
}

Indicatore in fondo durante l'aggiunta

Per mostrare un piccolo indicatore in fondo mentre viene caricata la pagina successiva, aggiunga un elemento extra al LazyColumn in base allo stato di caricamento 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()
            }
        }
    }
}

Riprovare in caso di errore

Quando un'operazione di aggiunta non riesce, mostri una riga per riprovare in fondo all'elenco. La chiamata a articles.retry() ripete solo il caricamento non riuscito, senza ricaricare l'intero elenco.

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") }
        }
    }
}

Trascinare per aggiornare

Attivi un nuovo caricamento con articles.refresh(). Lo combini con il gesto di aggiornamento tramite trascinamento di Material 3, facendo dipendere l'indicatore dallo stato di caricamento refresh.

import androidx.compose.material3.pulltorefresh.PullToRefreshBox

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

Intestazioni e separatori

Può combinare liberamente elementi paginati e contenuti non paginati nello stesso LazyColumn. Aggiunga un'intestazione fissa, una barra di ricerca o separatori di sezione intorno alla chiamata items() paginata.

Poiché tutto si trova in un unico LazyColumn, lo scorrimento rimane uniforme e fluido.

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)) }
    }
}

Visualizzare in anteprima gli elenchi paginati

Per le anteprime e i test Compose non serve una rete reale. Racchiuda i dati di esempio in PagingData.from(...) ed esponga il risultato come flow.

In questo modo può creare e visualizzare in anteprima l'interfaccia dell'elenco in isolamento.

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())
}

Verifica rapida

Quale funzione converte un Flow<PagingData> in qualcosa che un LazyColumn Compose può visualizzare?

Riepilogo: Paging in Compose

Ha visualizzato dati paginati in Jetpack Compose:

collectAsLazyPagingItems() collega il flow all'interfaccia utente
L'overload Paging di items() carica altri elementi durante lo scorrimento; gestisca i segnaposto null
Utilizzi itemKey { it.id } per ottenere chiavi stabili
loadState.refresh/append/prepend controlla indicatori, errori e stati di elenco vuoto
retry() e refresh() consentono di recuperare dagli errori e ricaricare i dati

Prossimo argomento: combinare rete e database con RemoteMediator.

Domande Frequenti

La lezione «Paging nelle liste Compose» è gratuita?

Sì — il testo completo di «Paging nelle liste Compose» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Android Academy, passa a CoddyKit PRO. Il corso Android Academy include 4 lezioni in totale.

Cosa imparerò in «Paging nelle liste Compose»?

Visualizzi dati paginati con LazyColumn Eserciti Android Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Android Academy?

Non è richiesta alcuna esperienza precedente. Android Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Paging nelle liste Compose»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Android Academy?

Sì. Ogni lezione Android Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Android Academy