Android Jetpack Compose Paging+SwipeRefresh实现分页和下拉刷新

96 阅读1分钟

implementation ("androidx.paging:paging-compose:1.0.0-alpha08") implementation ("com.google.accompanist:accompanist-swiperefresh:0.9.0")

定义Item内容

非常简单的一个标题和内容

data class Content(val title:String,val content: String)

定义RetrofitService

interface RetrofitService { @GET("getContent") suspend fun getContentByTitle(@Query("page") page: Int, @Query("title") title: String): AgResponse<List> }

定义PagingSource

class ContentPageSource(val title: String, private val mService: RetrofitService) : PagingSource<Int,Content>(){

override suspend fun load(params: LoadParams): LoadResult<Int, Content> { val key=params.key?:0 val resource = exeRequest { mService.getContentByTitle(key, title) }

return if (resource is Resource.SuccessResource) { resource.data?.let { return LoadResult.Page( it, null, if (key > 8) {//这里是假设获取了8页之后就没有下一页了 null } else { key + 1 } ) } LoadResult.Error(Exception()) } else { LoadResult.Error(Exception()) } }

override fun getRefreshKey(state: PagingState<Int, Content>): Int? { return null }

}

Repository

class HomeRepository(private val mService:RetrofitService) {

fun getContentByTitle(title:String)=Pager(config = PagingConfig(20)){ ContentPageSource(title,mService) } }

ViewModel

class HomeViewModel(private val homeRepository: HomeRepository) : BaseViewModel() {

fun getContentByTitle(title: String): Flow<PagingData> { return homeRepository.getContentByTitle(title).flow.cachedIn(viewModelScope) } }

对SwipeRefresh和Paging封装

@Composable fun SwipeRefreshList(collectAsLazyPagingItems: LazyPagingItems, content: LazyListScope.() -> Unit) { val rememberSwipeRefreshState = rememberSwipeRefreshState(isRefreshing = false) SwipeRefresh( state = rememberSwipeRefreshState, onRefresh = { collectAsLazyPagingItems.refresh() }) {

rememberSwipeRefreshState.isRefreshing = collectAsLazyPagingItems.loadState.refresh is LoadState.Loading

LazyColumn( modifier = Modifier .fillMaxHeight() .fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally ) {

content()

collectAsLazyPagingItems.apply { when { loadState.append is LoadState.Loading -> {//加载更多时,就在底部显示loading的item item { LoadingItem() } } loadState.append is LoadState.Error -> {//加载更多的时候出错了,就在底部显示错误的item item { ErrorItem() { collectAsLazyPagingItems.retry() } } } loadState.refresh is LoadState.Error -> { if (collectAsLazyPagingItems.itemCount <= 0) {//刷新的时候,如果itemCount小于0,说明是第一次进来,出错了显示一个大的错误内容 item { ErrorContent() { collectAsLazyPagingItems.retry() } } } else { item { ErrorItem() { collectAsLazyPagingItems.retry() } } } } } } } } }

@Composable fun ErrorItem(retry: () -> Unit) { Button(onClick = { retry() }, modifier = Modifier.padding(10.dp)) { Text(text = "重试") } }

@Composable fun ErrorContent(retry: () -> Unit) { Image(modifier = Modifier.padding(top = 80.dp),painter = painterResource(id = R.drawable.bg_empty), contentDescription = null) Text(text = "请求出错啦") Button(onClick = { retry() }, modifier = Modifier.padding(10.dp)) { Text(text = "重试") } }

@Composable fun LoadingItem() { CircularProgressIndicator(modifier = Modifier.padding(10.dp)) }