Android Jetpack Compose无限加载列表

 更新时间:2022年1月17日 16:24  点击:278 作者:fundroid_方卓

前言

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 ?: 1
            val 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 进行订阅。

请添加图片描述

总结

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

原文出处:https://blog.csdn.net/vitaviva/article/details/122519940

[!--infotagslink--]

相关文章

  • Android子控件超出父控件的范围显示出来方法

    下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法,希望这篇文章能够帮助到各位朋友,有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
  • Android开发中findViewById()函数用法与简化

    findViewById方法在android开发中是获取页面控件的值了,有没有发现我们一个页面控件多了会反复研究写findViewById呢,下面我们一起来看它的简化方法。 Android中Fin...2016-09-20
  • Android模拟器上模拟来电和短信配置

    如果我们的项目需要做来电及短信的功能,那么我们就得在Android模拟器开发这些功能,本来就来告诉我们如何在Android模拟器上模拟来电及来短信的功能。 在Android模拟...2016-09-20
  • 夜神android模拟器设置代理的方法

    夜神android模拟器如何设置代理呢?对于这个问题其实操作起来是非常的简单,下面小编来为各位详细介绍夜神android模拟器设置代理的方法,希望例子能够帮助到各位。 app...2016-09-20
  • android自定义动态设置Button样式【很常用】

    为了增强android应用的用户体验,我们可以在一些Button按钮上自定义动态的设置一些样式,比如交互时改变字体、颜色、背景图等。 今天来看一个通过重写Button来动态实...2016-09-20
  • Android WebView加载html5页面实例教程

    如果我们要在Android应用APP中加载html5页面,我们可以使用WebView,本文我们分享两个WebView加载html5页面实例应用。 实例一:WebView加载html5实现炫酷引导页面大多...2016-09-20
  • 深入理解Android中View和ViewGroup

    深入理解Android中View和ViewGroup从组成架构上看,似乎ViewGroup在View之上,View需要继承ViewGroup,但实际上不是这样的。View是基类,ViewGroup是它的子类。本教程我们深...2016-09-20
  • Android自定义WebView网络视频播放控件例子

    下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子,这个文章写得非常的不错下面给各位共享一下吧。 因为业务需要,以下代码均以Youtube网站在线视...2016-10-02
  • Android用MemoryFile文件类读写进行性能优化

    java开发的Android应用,性能一直是一个大问题,,或许是Java语言本身比较消耗内存。本文我们来谈谈Android 性能优化之MemoryFile文件读写。 Android匿名共享内存对外A...2016-09-20
  • Android设置TextView竖着显示实例

    TextView默认是横着显示了,今天我们一起来看看Android设置TextView竖着显示如何来实现吧,今天我们就一起来看看操作细节,具体的如下所示。 在开发Android程序的时候,...2016-10-02
  • android.os.BinderProxy cannot be cast to com解决办法

    本文章来给大家介绍关于android.os.BinderProxy cannot be cast to com解决办法,希望此文章对各位有帮助呀。 Android在绑定服务的时候出现java.lang.ClassCastExc...2016-09-20
  • js实现列表按字母排序

    这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
  • 浅谈Docker-compose中的depends_on顺序的问题解决

    本文主要介绍了浅谈Docker-compose中的depends_on顺序的问题解决,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-11-03
  • Android 实现钉钉自动打卡功能

    这篇文章主要介绍了Android 实现钉钉自动打卡功能的步骤,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下...2021-03-15
  • Python 列表(List)的底层实现原理分析

    这篇文章主要介绍了Python 列表(List)的底层实现原理分析,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
  • Android 开发之布局细节对比:RTL模式

    下面我们来看一篇关于Android 开发之布局细节对比:RTL模式 ,希望这篇文章对各位同学会带来帮助,具体的细节如下介绍。 前言 讲真,好久没写博客了,2016都过了一半了,赶紧...2016-10-02
  • javaScript年份下拉列表框内容为当前年份及前后50年

    javascript下拉列表框,内容为当前年份及前后50年,默认选择为当前年份 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.onload=function(){ //设置年份的选择 var myDate= new Date(...2014-05-31
  • Android中使用SDcard进行文件的读取方法

    首先如果要在程序中使用sdcard进行存储,我们必须要在AndroidManifset.xml文件进行下面的权限设置: 在AndroidManifest.xml中加入访问SDCard的权限如下: <!--...2016-09-20
  • easyUI下拉列表点击事件使用方法

    这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-22
  • Android开发之PhoneGap打包及错误解决办法

    下面来给各位简单的介绍一下关于Android开发之PhoneGap打包及错误解决办法,希望碰到此类问题的同学可进入参考一下哦。 在我安装、配置好PhoneGap项目的所有依赖...2016-09-20