Compose Paging3, SwipeRefresh in conjunction with the pull down refresh and automatic loading

An overview of the

The usage of Paging3 in Compose is basically the same as the usage of Paging3 in Recycleview. The difference is that the USER interface for Compose uses LazyColumn to hold data.

Here’s what we need to do:

• configurationPagingSource
• Configuration Data ClassSimpleUseBean
• configurationViewModel
• Render the data in LazyColumn

Simply loading data

Rely on

 var paging_version = "3.0.1"
    implementation("androidx.paging:paging-runtime:$paging_version")
    testImplementation("androidx.paging:paging-common:$paging_version")
    implementation("Androidx. The paging: the paging - compose: 1.0.0 - alpha12")
Copy the code

Data classes

data class SimpleUseBean(val data: String="")
Copy the code

ViewModel

class SimpleUseViewModel : ViewModel() {
    val projects = Pager(PagingConfig(pageSize = 20)){
        SimpleUseSource()
    }.flow.cachedIn(viewModelScope)
}
Copy the code

Configuration PagingSource

class SimpleUseSource : PagingSource<Int, SimpleUseBean>() {
    override fun getRefreshKey(state: PagingState<Int, SimpleUseBean>): Int? =null

    override suspend fun load(params: LoadParams<Int>): LoadResult<Int, SimpleUseBean> {
        return try {
            valnextPage = params.key ? :1
            val datas = mutableListOf(
                SimpleUseBean("Ha ha${params.key}"),
                SimpleUseBean("Ha ha${params.key}"),
                SimpleUseBean("Ha ha${params.key}"),
                SimpleUseBean("Ha ha${params.key}"),
                SimpleUseBean("Ha ha${params.key}")
            )
            LoadResult.Page(
                data = datas,
                prevKey = if (nextPage == 1) null else nextPage - 1,
                nextKey = if (nextPage < 100) nextPage + 1 else null)}catch (e: Exception) {
            LoadResult.Error(e)
        }
    }
}

Copy the code

Render data

@Composable
fun simpleUse(a) {
    val model = viewModel<SimpleUseViewModel>()
    val datas = model.projects.collectAsLazyPagingItems()
    LazyColumn(content = {
        itemsIndexed(datas) { _, data ->
            Box(
                Modifier
                    .padding(horizontal = 14.dp,vertical = 4.dp)
                    .fillMaxWidth()
                    .height(60.dp)
                    .border(1.dp, Color.Red, RoundedCornerShape(5.dp))
                    .padding(start = 10.dp)
                ,
                contentAlignment = Alignment.CenterStart
            ) {
                Text(text = data? .data? :"")}}})}Copy the code

Implementation effect

Compose, SwipeRefresh, and LazyColumn are used to refresh and load data

Rely on

SwipeRefresh rely on

 implementation ("Com. Google. Accompanist: accompanist - swiperefresh: 0.18.0." ")
Copy the code

PagingSource

class RefreshLoadUseSource : PagingSource<Int, RefreshData>() {
    override fun getRefreshKey(state: PagingState<Int, RefreshData>): Int? = null

    override suspend fun load(params: LoadParams<Int>): LoadResult<Int, RefreshData> {
        return try {
            valnextPage = params.key ? :1
            if (nextPage < 13) {
                delay(1500)
                val datas = mutableListOf(
                    RefreshData("Ha ha${params.key}"),
                    RefreshData("Ha ha${params.key}"),
                    RefreshData("Ha ha${params.key}"),
                    RefreshData("Ha ha${params.key}"),
                    RefreshData("Ha ha${params.key}")
                )
                LoadResult.Page(
                    data = datas,
                    prevKey = if (nextPage == 1) null else nextPage - 1,
                    nextKey = if (nextPage < 100) nextPage + 1 else null)}else {// Load errors if there are more than 13 entries
                LoadResult.Error(NullPointerException(Null pointer))}}catch (e: Exception) {
            LoadResult.Error(e)
        }
    }
}
Copy the code

ViewModel and data entities

data class RefreshData(val data: String)
Copy the code

class RefreshLoadUseViewModel : ViewModel() {
    val datas = Pager(PagingConfig(pageSize = 20)) {
        RefreshLoadUseSource()
    }.flow.cachedIn(viewModelScope)
}
Copy the code

The UI code

@Composable
fun refreshLoadUse(a) {
    val refreshState = rememberSwipeRefreshState(isRefreshing = false)
    val model = viewModel<RefreshLoadUseViewModel>()
    val collectAsLazyPagingItems = model.datas.collectAsLazyPagingItems()
    SwipeRefresh(state = refreshState, onRefresh = {
        collectAsLazyPagingItems.refresh()
    }) {
        LazyColumn(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight(),
            content = {
                itemsIndexed(collectAsLazyPagingItems) { _, refreshData ->// Display each item
                    Box(
                        modifier = Modifier
                            .padding(horizontal = 14.dp, vertical = 4.dp)
                            .fillMaxWidth()
                            .height(50.dp)
                            .background(Color.Green,shape= RoundedCornerShape(8.dp))
                            .border(
                                width = 1.dp,
                                color = Color.Red,
                                shape = RoundedCornerShape(8.dp)
                            )
                            .padding(start = 10.dp), contentAlignment = Alignment.CenterStart ) { Text(text = refreshData? .data? :"")}}when (collectAsLazyPagingItems.loadState.append) {
                    is LoadState.Loading -> {// Display the tail item in the load
                        item {
                            Box(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .height(50.dp),
                                contentAlignment = Alignment.Center
                            ) {
                                Text(text = "Loading...")}}}else- > {// Load the tail item displayed in error or complete
                        item {
                            Box(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .height(50.dp),
                                contentAlignment = Alignment.Center
                            ) {
                                Text(text = "-- loading complete or loading error --")}}}}})}}Copy the code

Implementation effect

Git: github.com/ananananzhu…