导航：首页 > 开发技术 >

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

发表于：2025-01-20 作者：千家信息网编辑

千家信息网最后更新 2025年01月20日，本文将为大家详细介绍"Android Jetpack Compose无限加载列表的示例分析"，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇"Android Jetpack

千家信息网最后更新 2025年01月20日Android Jetpack Compose无限加载列表的示例分析

本文将为大家详细介绍"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(    privateval repo: MyRepository) : PagingSource() {    override suspend fun load(params: LoadParams): LoadResult {        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> = Pager(PagingConfig(pageSize = 20)) {        MyDataSource(repo)    }.flow}

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

@Composablefun MyList(pagingData: Flow>) {    val listItems: LazyPagingItems = pagingData.collectAsLazyPagingItems()    LazyColumn {        items(listItems) {             ItemCard(data = it)        }    }}

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

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

public fun  LazyListScope.items(    items: LazyPagingItems,    key: ((item: T) -> Any)? = null,    itemContent: @Composable LazyItemScope.(value: T?) -> Unit) {        ...}

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

方法二：自定义实现

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

@Composablefun list() {    val listItems = viewModel.data.observeAsState()    LazyColumn {        listItems.value.forEach { item ->            item { ItemCard(item) }            }        item {                 LaunchedEffect(Unit) {                        viewModel.loadMore()                }        }    }}

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

@Composablefun 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，可以实现代码如下

@Composablefun 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 进行订阅。