经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » Android » 查看文章
Android Jetpack Compose无限加载列表
来源:jb51  时间:2022/1/17 12:17:02  对本文有异议

前言

Android 中使用 ListView 或者 RecycleView 经常有滚动到底部自动 LoadMore 的需求,那么在 Compose 中该如何实现呢?

两种方法可供选择:

基于 paging-compose

自定义实现

方法一: paging-compose

Jetpack 的 Paging 组件提供了对 Compose 的支持

  1. dependencies {
  2. ...
  3. // Paging Compose
  4. implementation "androidx.paging:paging-compose:$latest_version"
  5. }

Paging 的无限加载列表需要依靠 Paging 的 DataSource,我们创建一个 DataSource ,并在 ViewModel 中加载

  1. class MyDataSource(
  2. private val repo: MyRepository
  3. ) : PagingSource<Int, MyData>() {
  4.  
  5. override suspend fun load(params: LoadParams<Int>): LoadResult<Int, MyData> {
  6. return try {
  7. val nextPage = params.key ?: 1
  8. val response = repo.fetchData(nextPage)
  9.  
  10. LoadResult.Page(
  11. data = response.results,
  12. prevKey = if (nextPage == 1) null else nextPage - 1,
  13. nextKey = repo.page.plus(1)
  14. )
  15. } catch (e: Exception) {
  16. LoadResult.Error(e)
  17. }
  18. }
  19. }
  20.  
  21. class MainViewModel(
  22. repo: MyRepository
  23. ) : ViewModel() {
  24.  
  25. val pagingData: Flow<PagingData<MyData>> = Pager(PagingConfig(pageSize = 20)) {
  26. MyDataSource(repo)
  27. }.flow
  28. }
  29.  

接下来在 Compose 使用 LazyColumn 或者 LazyRow 显示 Paging 的数据

  1. @Composable
  2. fun MyList(pagingData: Flow<PagingData<MyData>>) {
  3. val listItems: LazyPagingItems<MyData> = pagingData.collectAsLazyPagingItems()
  4.  
  5. LazyColumn {
  6. items(listItems) {
  7. ItemCard(data = it)
  8. }
  9. }
  10. }

MyList 从 ViewModel 获取 Flow<PagingData<MyData>> 并通过 collectAsLazyPagingItems 转换成 Compose 的 State ,最终传递给 LazyColumn 内的 items 中进行展示。

注意这里的 items(...) 是 paging-compose 中为 LazyListScope 定义的扩展方法,而非通常使用的 LazyListScope#items

  1. public fun <T : Any> LazyListScope.items(
  2. items: LazyPagingItems<T>,
  3. key: ((item: T) -> Any)? = null,
  4. itemContent: @Composable LazyItemScope.(value: T?) -> Unit
  5. ) {
  6. ...
  7. }

它接受的参数类型是 LazyPagingItems<T>, LazyPagingItems 在 get 时会判断是否滑动到底部并通过 Paging 请求新的数据,以此实现了自动加载。

方法二:自定义实现

如果你不想使用 Paging 的 DataSource,也可以自定义一个无限加载列表的 Composable

  1. @Composable
  2. fun list() {
  3. val listItems = viewModel.data.observeAsState()
  4. LazyColumn {
  5. listItems.value.forEach { item ->
  6. item { ItemCard(item) }
  7. }
  8. item {
  9. LaunchedEffect(Unit) {
  10. viewModel.loadMore()
  11. }
  12. }
  13. }
  14. }

当加载到最后一个 item 时,通过 LaunchedEffect 向 viewModel 请求新的数据。
你也可以是用下面的方法,在抵达最后一个 item 之前,提前 loadmore,

  1. @Composable
  2. fun list() {
  3. val listItems = viewModel.data.observeAsState()
  4. LazyColumn {
  5. itemsIndexed(listItmes) { index, item ->
  6. itemCard(item)
  7. LaunchedEffect(listItems.size) {
  8. if (listItems.size - index < 2) {
  9. viewModel.loadMore()
  10. }
  11. }
  12. }
  13. }
  14. }

如上,使用 itemsIndexed() 可以在展示 item 的同时获取当前 index,每次展示 item 时,都判断一下是否达到 loadMore 条件,比如代码中是当距离抵达当前列表尾部还有 2 个以内 item 。
注意 LaunchedEffect 可能会随着每个 item 重组而执行,为 LaunchedEffect 增加参数 listItems.size 是为了确保对其在 item 上屏时只走一次。

添加 LoadingIndicator

如果想在 loadMore 时显示一个 LoadingIndicator, 可以实现代码如下

  1. @Composable
  2. fun list() {
  3. val listItems = viewModel.data.observeAsState()
  4. val isLast = viewModel.isLast.observeAsState()
  5. LazyColumn {
  6. listItems.value.forEach { item ->
  7. item { ItemCard(item) }
  8. }
  9. if (isLast.value.not()) {
  10. item {
  11. LoadingIndicator()
  12. LaunchedEffect(Unit) {
  13. viewModel.loadMore()
  14. }
  15. }
  16. }
  17. }
  18. }

在展示最后一个 item 时,显示 LoadingIndicator() ,同时 loadMore(), 当没有数据可以加载时,不能再显示 LoadingIndicator,所以我们必须将 isLast 作为一个状态记录到 ViewModel 中,当然,你也可以将 viewModel.data 和 viewModel.isLast 等所有状态合并为一个 UiState 进行订阅。

请添加图片描述

总结

到此这篇关于Android Jetpack Compose无限加载列表的文章就介绍到这了,更多相关Android Jetpack Compose内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号