使用 paging 3 和 Jetpack compose UI 无限循环加载项目答案

【问题标题】：Inifinite loop loading items with paging3 and Jetpack compose UI使用 paging 3 和 Jetpack compose UI 无限循环加载项目
【发布时间】：2022-12-04 20:59:49
【问题描述】：

我有一个简单的单屏应用，在可组合项目列表中显示电影：

我使用 Android 的 paging3 库来逐页加载电影，一切似乎运行良好：

@Composable
fun FlixListScreen(viewModel: MoviesViewModel) {
    val lazyMovieItems = viewModel.moviesPageFlow.collectAsLazyPagingItems()
    MoviesList(lazyMovieItems)
}

@Composable
fun MoviesList(lazyPagedMovies: LazyPagingItems<Movie>) {
    LazyColumn(modifier = Modifier.padding(horizontal = 16.dp)) {
        itemsIndexed(lazyPagedMovies) { index, movie ->
            MoviesListItem(index, movie!!)
        }
    }
}

在尝试将进度指示器添加到初始加载阶段（例如，如 Android code-lab 中所述），我尝试应用以下条件，基于 loadState.refresh：

@Composable
fun FlixListScreen(viewModel: MoviesViewModel) {
    val lazyMovieItems = viewModel.moviesPageFlow.collectAsLazyPagingItems()

    // Added: Show a progress indicator while the data is loading
    if (lazyPagedMovies.loadState.refresh is LoadState.Loading) {
        LinearProgressIndicator(modifier = Modifier.fillMaxWidth())
    }
    MoviesList(lazyMovieItems)
}

与显示进度指示器不同，这种天真的添加似乎将分页加载程序置于无限循环中，其中第一页被无限期地获取，没有任何项目被有效地加载（更不用说显示）到列表中了。

旁注：只是为了排除这一切都与条件本身有关，似乎即使添加像这个日志这样少的东西：Log.i("DBG", ""+lazyPagesMovies.loadState) 完全没有条件，也会引入不良行为。

我使用的是 Kotlin 版本 1.7.10 和版本 1.3.1 中的各种 Compose 库。

【问题讨论】：

标签： android android-jetpack-compose android-paging-3

【解决方案1】：

似乎使用简单的代码我可能会以某种方式遇到一些与 Compose 相关的边缘情况。我设法通过在直接接受分页项的子功能（可组合）下引入有条件的进度指示器来解决问题：

@Composable
fun FlixListScreen(viewModel: MoviesViewModel) {
    val lazyMovieItems = viewModel.moviesPageFlow.collectAsLazyPagingItems()
    MoviesScreen(lazyMovieItems) // was: MoviesList(lazyMovieItems)
}

// Newly added intermediate function
@Composable
fun MoviesScreen(lazyPagedMovies: LazyPagingItems<Movie>) {
    MoviesList(lazyPagedMovies)

    if (lazyPagedMovies.loadState.refresh is LoadState.Loading) {
        LinearProgressIndicator(modifier = Modifier.fillMaxWidth())
    }
}

@Composable
fun MoviesList(lazyPagedMovies: LazyPagingItems<Movie>) {
    // ... (unchanged)
}

【讨论】：