Jetpack Compose 无限加载列表(滚到底部自动加载更多)
Android 中使用 ListView 或者 RecycleView 经常有滚动到底部自动 LoadMore 的需求,那么在 Compose 中该如何实现呢?
两种方法可供选择:
- 基于 paging-compose
- 自定义实现
方法一: paging-compose
Jetpack 的 Paging 组件提供了对 Compose 的支持
dependencies {...// Paging Compose implementation "androidx.paging:paging-compose:$latest_version"
}
Paging 的无限加载列表需要依靠 Paging 的 DataSource,我们创建一个 DataSource ,并在 ViewModel 中加载
class MyDataSource(private val repo: MyRepository
) : PagingSource<Int, MyData>() {override suspend fun load(params: LoadParams<Int>): LoadResult<Int, MyData> {return try {val nextPage = params.key ?: 1val response = repo.fetchData(nextPage)LoadResult.Page(data = response.results,prevKey = if (nextPage == 1) null else nextPage - 1,nextKey = repo.page.plus(1))} catch (e: Exception) {LoadResult.Error(e)}}
}class MainViewModel(repo: MyRepository
) : ViewModel() {val pagingData: Flow<PagingData<MyData>> = Pager(PagingConfig(pageSize = 20)) {MyDataSource(repo)}.flow
}
接下来在 Compose 使用 LazyColumn 或者 LazyRow 显示 Paging 的数据
@Composable
fun MyList(pagingData: Flow<PagingData<MyData>>) {val listItems: 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
,
public fun <T : Any> LazyListScope.items(items: LazyPagingItems<T>,key: ((item: T) -> Any)? = null,itemContent: @Composable LazyItemScope.(value: T?) -> Unit
) {...
}
它接受的参数类型是 LazyPagingItems<T>
, LazyPagingItems 在 get 时会判断是否滑动到底部并通过 Paging 请求新的数据,以此实现了自动加载。
方法二:自定义实现
如果你不想使用 Paging 的 DataSource,也可以自定义一个无限加载列表的 Composable
@Composable
fun list() {val listItems = viewModel.data.observeAsState()LazyColumn {listItems.value.forEach { item ->item { ItemCard(item) } }item { LaunchedEffect(Unit) {viewModel.loadMore()}}}
}
当加载到最后一个 item 时,通过 LaunchedEffect 向 viewModel 请求新的数据。
你也可以是用下面的方法,在抵达最后一个 item 之前,提前 loadmore,
@Composable
fun list() {val listItems = 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
, 可以实现代码如下
@Composable
fun list() {val listItems = viewModel.data.observeAsState()val isLast = 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 进行订阅。
Jetpack Compose 无限加载列表(滚到底部自动加载更多)相关推荐
- jQuery插件实现网页底部自动加载-类似新浪微博
要实现滚动条滚到底部自动加载后续内容到内容到底部的功能,用jQuery非常方便的,只要知道什么时候滚动到了底部就好办了. $(document).scrollTop() //获取垂直滚动条到顶部的距离 ...
- html5到底部自动加载,列表滚动到底部自动加载更多
列表滚动到底部自动加载更多 在移动端,经常会用到列表滚动到底部,拉一下加载更多,或者点一下加载更多等等,今天我说说我的一个实现的思路. 通过监听列表的滚动时间,当用户滚动到列表的底部,并停留一小段时间 ...
- C语言界面列表的滑动效果,jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)...
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/ ...
- html底部自动加载下一页,js页面滚动到底部时自动加载下一页数据
一段滚动到页面底部自动加载更多数据的js代码,需要jquery.js . jquey.tmpl.js 支持 var Data = { PageCount: 1, PageSize: 30, IsCom ...
- 仿新浪微博实现ListBox下拉刷新和到底部自动加载
一.下拉刷新 下拉刷新实现思路: 1.定义一个PullDownToRefreshPanel容器控件.为它添加3种状态模板,分别是PullingDownTemplate,ReadyToReleaseTe ...
- 探索SwipeRefreshLayout配合自定义ListView完成下拉刷新、滑到底部自动加载更多
在Android开发过程中经常需要实现上下拉刷新功能,Google推出的下拉刷新控件SwipeRefreshLayout(彩虹条),由于官方版本只有下拉刷新而没有上拉加载更多的功能,很多人也尝试在这个 ...
- php ajax 上拉显示更多,PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载...
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 ::点击加载更多内容:: 引入jQuery插件和jquery.more.js加载更多插件 jQuery $(function( ...
- 分享大麦UWP版本开发历程-03.GridView或ListView 滚动底部自动加载后续数据
今天跟大家分享的是大麦UWP客户端,在分类.订单或是搜索时都用到的一个小技巧,技术粗糙大神勿喷. 以大麦分类举例,默认打开的时候,会为用户展示20条数据,当用户滚动鼠标或者使用手势将列表滑动到倒数第二 ...
- RecyclerView滑动到底部自动加载
你经常听到"上拉加载"这样的字眼吗?你知道这个功能是怎么实现的吗?这篇文章记录了我对"上拉加载"的实现,与大家一起分享. "上拉加载"针对的 ...
最新文章
- pyqt 获取 UI 中组件_一起学Vue:UI框架(elementui)
- 对软件测试的认识你了解多少
- HyperV2012的学习,从这里开始
- 递归、os.walk、内置函数、lambda、hashlib模块、md5加密、python安装第三方模块、操作mysql数据库...
- LeetCode 227. 基本计算器 II 【c++/java详细题解】
- 计算机合并单元格怎么操作,excel怎么合并单元格,教您excel合并单元格的方法
- Docker中ubuntu镜像安装ps显示进程
- flutter去除阻尼效果
- 深度学习 - 38.Gensim Word2Vec 实践
- Android日期时间与时区使用总结汇总
- 安装数据库中间件——Mycat
- 【阿朱洞察】中国云计算市场未来3年展望(完善版)
- 【英文SEO】Google网站管理员工具是什么?
- 微信小程序使用icon图标
- PHP大学生心理健康管理系统
- vs2010+CSerialPortv4.1.0.201010+webbrowser控件实现百度地图(在线和离线)定位
- 2018年软件质量与测试大盘点
- python开发小工具项目_给中级Python开发者的13个练手项目,适合你不?
- 怎么安装Latex——Texstudio+Texlive 2020+Sumatra PDF详细安装教材
- 函数式编程是如何提升代码的扩展性
热门文章
- Mob免费验证码androidStudio实现
- “创业吃过饼,国企养过老,android开发零基础
- blender使用stereoscopy渲染输出VR图片和视频
- arm学习方法(转)
- TMS320C6748的StarterSware软件包
- efi分区隐藏_隐藏Win10误显示的EFI分区
- 戴尔台式机装linux系统,在戴尔(Dell)台式机上安装深度Deepin系统的BIOS设置方法...
- 【Deel learning之一 】激活函数
- win10合并硬盘合区(win10怎样合并硬盘的两个分区)
- 河北大学计算机网络卷子,河北大学计算机网络试卷