androidx.paging.compose

@Composable
fun <T : Any> Flow<PagingData<T>>.collectAsLazyPagingItems(
    context: CoroutineContext = EmptyCoroutineContext
): LazyPagingItems<T>

Collects values from this Flow of PagingData and represents them inside a LazyPagingItems instance. The LazyPagingItems instance can be used for lazy foundations such as LazyListScope.items in order to display the data obtained from a Flow of PagingData.

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.sp
import androidx.paging.LoadState
import androidx.paging.Pager
import androidx.paging.PagingConfig
import androidx.paging.compose.collectAsLazyPagingItems

val myBackend = remember { TestBackend(DATA) }

val pager = remember {
    Pager(
        PagingConfig(
            pageSize = myBackend.DataBatchSize,
            enablePlaceholders = true,
            maxSize = 200
        )
    ) { myBackend.getAllData() }
}

val lazyPagingItems = pager.flow.collectAsLazyPagingItems()

LazyColumn {
    if (lazyPagingItems.loadState.refresh == LoadState.Loading) {
        item {
            Text(
                text = "Waiting for items to load from the backend",
                modifier = Modifier.fillMaxWidth()
                    .wrapContentWidth(Alignment.CenterHorizontally)
            )
        }
    }

    items(count = lazyPagingItems.itemCount) { index ->
        val item = lazyPagingItems[index]
        Text("Index=$index: $item", fontSize = 20.sp)
    }

    if (lazyPagingItems.loadState.append == LoadState.Loading) {
        item {
            CircularProgressIndicator(
                modifier = Modifier.fillMaxWidth()
                    .wrapContentWidth(Alignment.CenterHorizontally)
            )
        }
    }
}

fun <T : Any> LazyPagingItems<T>.itemContentType(
    contentType: ((@<Error class: unknown class> item) -> Any)? = null
): (index: Int) -> Any

Returns a factory for the content type of the item.

ContentTypes are generated with the contentType lambda that is passed in. If null is passed in, contentType of all items will default to null. If PagingConfig.enablePlaceholders is true, LazyPagingItems may return null items. Null items will automatically default to placeholder contentType.

This factory can be applied to Lazy foundations such as LazyGridScope.items or Pagers. Examples:

import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.paging.compose.collectAsLazyPagingItems
import androidx.paging.compose.itemContentType
import androidx.paging.compose.itemKey

val lazyPagingItems = pager.collectAsLazyPagingItems()

LazyVerticalGrid(columns = GridCells.Fixed(2)) {
    items(
        count = lazyPagingItems.itemCount,
        key = lazyPagingItems.itemKey { it },
        contentType = lazyPagingItems.itemContentType { "MyPagingItems" }
    ) { index ->
        val item = lazyPagingItems[index]
        PagingItem(item = item)
    }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.paging.compose.collectAsLazyPagingItems
import androidx.paging.compose.itemContentType
import androidx.paging.compose.itemKey

val lazyPagingItems = pager.collectAsLazyPagingItems()

LazyColumn {
    stickyHeader(
        key = "Header",
        contentType = "My Header",
    ) {
        Box(
            modifier = Modifier
                .padding(bottom = 10.dp)
                .background(Color.Red)
                .fillMaxWidth(),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "Header", fontSize = 32.sp)
        }
    }
    items(
        count = lazyPagingItems.itemCount,
        key = lazyPagingItems.itemKey { it },
        contentType = lazyPagingItems.itemContentType { "MyPagingItems" }
    ) { index ->
        val item = lazyPagingItems[index]
        PagingItem(item = item)
    }
}

fun <T : Any> LazyPagingItems<T>.itemKey(
    key: ((@<Error class: unknown class> item) -> Any)? = null
): (index: Int) -> Any

Returns a factory of stable and unique keys representing the item.

Keys are generated with the key lambda that is passed in. If null is passed in, keys will default to a placeholder key. If PagingConfig.enablePlaceholders is true, LazyPagingItems may return null items. Null items will also automatically default to a placeholder key.

This factory can be applied to Lazy foundations such as LazyGridScope.items or Pagers. Examples:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PageSize
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.paging.Pager
import androidx.paging.compose.collectAsLazyPagingItems
import androidx.paging.compose.itemKey

val lazyPagingItems = pager.collectAsLazyPagingItems()
val pagerState = rememberPagerState { lazyPagingItems.itemCount }

HorizontalPager(
    modifier = Modifier.fillMaxSize(),
    state = pagerState,
    pageSize = PageSize.Fixed(200.dp),
    key = lazyPagingItems.itemKey { it }
) { index ->
    val item = lazyPagingItems[index]
    PagingItem(item = item)
}

import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.paging.compose.collectAsLazyPagingItems
import androidx.paging.compose.itemContentType
import androidx.paging.compose.itemKey

val lazyPagingItems = pager.collectAsLazyPagingItems()

LazyVerticalGrid(columns = GridCells.Fixed(2)) {
    items(
        count = lazyPagingItems.itemCount,
        key = lazyPagingItems.itemKey { it },
        contentType = lazyPagingItems.itemContentType { "MyPagingItems" }
    ) { index ->
        val item = lazyPagingItems[index]
        PagingItem(item = item)
    }
}