Android Jetpack Compose无限加载列表的示例分析
Android Jetpack Compose无限加载列表的示例分析
本文将为大家详细介绍“AndroidJetpackCompose无限加载列表的示例分析”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“AndroidJetpackCompose无限加载列表的示例分析”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。
前言
Android 中使用 ListView 或者 RecycleView 经常有滚动到底部自动 LoadMore 的需求,那么在 Compose 中该如何实现呢?
两种方法可供选择:
基于 paging-compose
自定义实现
方法一: paging-compose
Jetpack 的 Paging 组件提供了对 Compose 的支持
dependencies{...//PagingComposeimplementation"androidx.paging:paging-compose:$latest_version"}
Paging 的无限加载列表需要依靠 Paging 的 DataSource,我们创建一个 DataSource ,并在 ViewModel 中加载
classMyDataSource(privatevalrepo:MyRepository):PagingSource<Int,MyData>(){overridesuspendfunload(params:LoadParams<Int>):LoadResult<Int,MyData>{returntry{valnextPage=params.key?:1valresponse=repo.fetchData(nextPage)LoadResult.Page(data=response.results,prevKey=if(nextPage==1)nullelsenextPage-1,nextKey=repo.page.plus(1))}catch(e:Exception){LoadResult.Error(e)}}}classMainViewModel(repo:MyRepository):ViewModel(){valpagingData:Flow<PagingData<MyData>>=Pager(PagingConfig(pageSize=20)){MyDataSource(repo)}.flow}
接下来在 Compose 使用 LazyColumn 或者 LazyRow 显示 Paging 的数据
@ComposablefunMyList(pagingData:Flow<PagingData<MyData>>){vallistItems:LazyPagingItems<MyData>=pagingData.collectAsLazyPagingItems()LazyColumn{items(listItems){ItemCard(data=it)}}}
MyList 从 ViewModel 获取 Flow<PagingData<MyData>>
并通过 collectAsLazyPagingItems
转换成 Compose 的 State ,最终传递给 LazyColumn 内的 items
中进行展示。
注意这里的 items(...)
是 paging-compose 中为 LazyListScope 定义的扩展方法,而非通常使用的 LazyListScope#items
,
publicfun<T:Any>LazyListScope.items(items:LazyPagingItems<T>,key:((item:T)->Any)?=null,itemContent:@ComposableLazyItemScope.(value:T?)->Unit){...}
它接受的参数类型是 LazyPagingItems<T>
, LazyPagingItems 在 get 时会判断是否滑动到底部并通过 Paging 请求新的数据,以此实现了自动加载。
方法二:自定义实现
如果你不想使用 Paging 的 DataSource,也可以自定义一个无限加载列表的 Composable
@Composablefunlist(){vallistItems=viewModel.data.observeAsState()LazyColumn{listItems.value.forEach{item->item{ItemCard(item)}}item{LaunchedEffect(Unit){viewModel.loadMore()}}}}
当加载到最后一个 item 时,通过 LaunchedEffect 向 viewModel 请求新的数据。
你也可以是用下面的方法,在抵达最后一个 item 之前,提前 loadmore,
@Composablefunlist(){vallistItems=viewModel.data.observeAsState()LazyColumn{itemsIndexed(listItmes){index,item->itemCard(item)LaunchedEffect(listItems.size){if(listItems.size-index<2){viewModel.loadMore()}}}}}
如上,使用 itemsIndexed()
可以在展示 item 的同时获取当前 index,每次展示 item 时,都判断一下是否达到 loadMore 条件,比如代码中是当距离抵达当前列表尾部还有 2 个以内 item 。
注意 LaunchedEffect 可能会随着每个 item 重组而执行,为 LaunchedEffect 增加参数 listItems.size
是为了确保对其在 item 上屏时只走一次。
添加 LoadingIndicator
如果想在 loadMore 时显示一个 LoadingIndicator
, 可以实现代码如下
@Composablefunlist(){vallistItems=viewModel.data.observeAsState()valisLast=viewModel.isLast.observeAsState()LazyColumn{listItems.value.forEach{item->item{ItemCard(item)}}if(isLast.value.not()){item{LoadingIndicator()LaunchedEffect(Unit){viewModel.loadMore()}}}}}
在展示最后一个 item 时,显示 LoadingIndicator()
,同时 loadMore()
, 当没有数据可以加载时,不能再显示 LoadingIndicator,所以我们必须将 isLast 作为一个状态记录到 ViewModel 中,当然,你也可以将 viewModel.data 和 viewModel.isLast 等所有状态合并为一个 UiState 进行订阅。
Android是什么
Android是一种基于Linux内核的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由美国Google公司和开放手机联盟领导及开发。
如果你能读到这里,小编希望你对“AndroidJetpackCompose无限加载列表的示例分析”这一关键问题有了从实践层面最深刻的体会,具体使用情况还需要大家自己动手实践使用过才能领会,如果想阅读更多相关内容的文章,欢迎关注恰卡编程网行业资讯频道!