温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Android Jetpack Compose无限加载列表的示例分析

发布时间:2022-01-17 14:07:00 来源:亿速云 阅读:319 作者:清风 栏目:开发技术

本文将为大家详细介绍“Android Jetpack Compose无限加载列表的示例分析”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“Android 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 ?: 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是什么

    Android是一种基于Linux内核的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由美国Google公司和开放手机联盟领导及开发。

    如果你能读到这里,小编希望你对“Android Jetpack Compose无限加载列表的示例分析”这一关键问题有了从实践层面最深刻的体会,具体使用情况还需要大家自己动手实践使用过才能领会,如果想阅读更多相关内容的文章,欢迎关注亿速云行业资讯频道!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI