Android Academy · Oppitunti

Sivutus Compose-luetteloissa

Renderöikää sivutettuja tietoja LazyColumnilla.

Oppitunti 3/413 vaihetta

Sivutus Compose-luetteloissa on ilmainen Android Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Android Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Android Academy-kurssilla on yhteensä 4 oppituntia.

Sivutetun datan näyttäminen Composessa

Datakerros antaa käyttöönne arvon Flow<PagingData<Article>>. paging-compose-kirjasto muuntaa tämän virran muotoon, jonka LazyColumn voi näyttää. Samalla kohteita ladataan tarpeen mukaan käyttäjän vierittäessä.

Keskeinen yhdistävä funktio on collectAsLazyPagingItems().

collectAsLazyPagingItems

Kutsukaa collectAsLazyPagingItems()-funktiota virralle komposoitavan funktion sisällä. Se palauttaa LazyPagingItems-olion, joka seuraa ladattuja kohteita ja lataustiloja sekä koostaa käyttöliittymän uudelleen sivujen saapuessa.

import androidx.paging.compose.collectAsLazyPagingItems

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

items() ja LazyPagingItems

Käyttäkää LazyColumn-komponentin sisällä Pagingin items()-ylikuormitettua versiota. Se lukee dataa LazyPagingItems-oliosta ja käynnistää seuraavan sivun lataamisen, kun käyttäjä lähestyy loppua.

Jokainen kohde voi olla null, kun paikanvaraajat ovat käytössä, joten käsitelkää myös tämä tapaus.

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

Kohteiden vakaat avaimet

Antakaa jokaiselle riville vakaa avain, jotta Compose voi seurata kohteita tehokkaasti sivujen latautuessa ja välttää tarpeettoman uudelleenkoostamisen.

Käyttäkää Pagingin itemKey-apufunktiota ja yksilöllistä, vakaata ominaisuutta, kuten kohteen tunnistetta.

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

Lataustilojen lukeminen

LazyPagingItems.loadState tarjoaa nykyisen lataus- ja virhetilan kolmelle toiminnolle:

refresh – ensimmäinen lataus tai vetämällä päivitettävä lataus
append – seuraavan sivun lataus (vieritettäessä alaspäin)
prepend – edellisen sivun lataus (vieritettäessä ylöspäin)

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

Koko näytön lataus- ja tyhjät tilat

Käyttäkää tilaa refresh ensimmäisen näkymän ohjaamiseen: näyttäkää keskitetty latausympyrä latauksen aikana, virhenäkymä virhetilanteessa tai tyhjästä sisällöstä kertova viesti, jos näytettävää ei ole.

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

Alareunan latausympyrä sivua lisättäessä

Voitte näyttää pienen latausympyrän alareunassa seuraavan sivun latautuessa lisäämällä LazyColumn-komponenttiin ylimääräisen kohteen append-lataustilan perusteella.

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

Uudelleenyritys virheen jälkeen

Kun sivun lisääminen epäonnistuu, näyttäkää alareunassa uudelleenyritysrivi. Kutsu articles.retry() yrittää uudelleen vain epäonnistunutta latausta – se ei lataa koko luetteloa uudelleen.

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

Vetämällä päivittäminen

Käynnistäkää uusi lataus komennolla articles.refresh(). Yhdistäkää se Material 3:n vetämällä päivitettävään toimintaan ja ohjatkaa ilmaisinta refresh-lataustilan perusteella.

import androidx.compose.material3.pulltorefresh.PullToRefreshBox

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

Ylätunnisteet ja erottimet

Voitte yhdistää sivutetut kohteet ja sivuttamattoman sisällön vapaasti samaan LazyColumn-komponenttiin. Lisätkää kiinnitetty ylätunniste, hakupalkki tai osioiden erottimet sivutetun items()-kutsun ympärille.

Koska kaikki on samassa LazyColumn-komponentissa, vieritys pysyy yhtenäisenä ja sujuvana.

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

Sivutettujen luetteloiden esikatselu

Compose-esikatseluja ja testejä varten ette tarvitse oikeaa verkkoyhteyttä. Käärikää esimerkkidata PagingData.from(...)-kutsulla ja asettakaa se saataville virtana.

Näin voitte rakentaa ja esikatsella luettelon käyttöliittymää erillään muusta sovelluksesta.

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

Pikatarkistus

Mikä funktio muuntaa arvon Flow<PagingData> muotoon, jonka Compose-ympäristön LazyColumn voi näyttää?

Vastaa interaktiivisessa oppitunnissa

Kertaus: sivutus Composessa

Näytitte sivutettua dataa Jetpack Composessa:

collectAsLazyPagingItems() yhdistää virran käyttöliittymään
Pagingin items()-ylikuormitus lataa lisää kohteita vierityksen aikana; käsitelkää null-paikanvaraajat
Käyttäkää vakaisiin avaimiin muotoa itemKey { it.id }
loadState.refresh/append/prepend ohjaa latausympyröitä, virheitä ja tyhjiä tiloja
retry() ja refresh() palauttavat toiminnan virheistä ja lataavat datan uudelleen

Seuraavaksi yhdistätte verkon ja tietokannan RemoteMediator-komponentilla.

Aloita maksutta

Opi Kotlin tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 36
Oppitunnit: 152

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Sivutus Compose-luetteloissa” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Android Academy-oppimispolun 3 oppituntia, myös oppitunnin “Sivutus Compose-luetteloissa”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Android Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Sivutus Compose-luetteloissa”?

Renderöikää sivutettuja tietoja LazyColumnilla. Harjoittelet Android Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Android Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Android Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Sivutus Compose-luetteloissa”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Android Academy-oppitunnilla?

Kyllä. Jokainen Android Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Android Academy