在垂直网格中实现分页答案

【问题标题】：Implement pagination in a vertical grid在垂直网格中实现分页
【发布时间】：2023-01-08 03:37:31
【问题描述】：

我正在尝试在垂直网格中实现分页。我已经使用 lazyColumn (https://github.com/alirezaeiii/TMDb-Compose/blob/main/app/src/main/java/com/android/sample/tmdb/ui/paging/PagingScreen.kt) 成功构建了它，但由于某些原因它不适用于 lazyVerticalGrid。这是我的代码：

@Composable
fun <T : TMDbItem> PagingScreen(viewModel: BasePagingViewModel<T>) {
    val lazyTMDbItems = viewModel.pagingDataFlow.collectAsLazyPagingItems()

    LazyVerticalGrid(
        columns = GridCells.Fixed(COLUMN_COUNT),
        contentPadding = PaddingValues(
            start = GRID_SPACING,
            end = GRID_SPACING,
            bottom = WindowInsets.navigationBars.getBottom(LocalDensity.current).toDp().dp.plus(
                GRID_SPACING
            )
        ),
        horizontalArrangement = Arrangement.spacedBy(GRID_SPACING, Alignment.CenterHorizontally),
        content = {

            items(lazyTMDbItems.itemCount) { index ->
                val tmdbItem = lazyTMDbItems.peek(index)
                tmdbItem?.let {
                    TMDbItemContent(
                        tmdbItem,
                        Modifier
                            .height(320.dp)
                            .padding(vertical = GRID_SPACING)
                    )
                }
            }

            lazyTMDbItems.apply {
                when {
                    loadState.refresh is LoadState.Loading -> {
                        item { LoadingView(modifier = Modifier.fillMaxSize()) }
                    }
                    loadState.append is LoadState.Loading -> {
                        item { LoadingItem() }
                    }
                    loadState.refresh is LoadState.Error -> {
                        val e = lazyTMDbItems.loadState.refresh as LoadState.Error
                        item {
                            ErrorScreen(
                                message = e.error.localizedMessage!!,
                                modifier = Modifier.fillMaxSize(),
                                refresh = { retry() }
                            )
                        }
                    }
                    loadState.append is LoadState.Error -> {
                        val e = lazyTMDbItems.loadState.append as LoadState.Error
                        item {
                            ErrorScreen(
                                message = e.error.localizedMessage!!,
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .padding(8.dp),
                                refresh = { retry() }
                            )
                        }
                    }
                }
            }
        })
}

它加载第一个两页，但不加载第三页和更高版本，我的实现中是否缺少任何内容？代码可以在这里找到：https://github.com/alirezaeiii/TMDb-Compose/tree/Pagination-grid

【问题讨论】：

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

【解决方案1】：

加载由 LazyPagingItems::get 方法触发。您使用的另一种方法 LazyPagingItems::peek 具体说：

在指定位置返回呈现的项目，而不通知 Paging 通常会触发页面加载的项目访问。

因此，只需调用 get 而不是 peek 就可以解决这个问题。如果你想为你的项目指定密钥（你应该这样做），你必须在密钥工厂中使用peek，因为密钥是为所有项目评估的，即使是那些不可见的项目，所以调用get会触发立即加载。

您可以查看作为 paging-compose 库的一部分的 LazyListScope::items 扩展函数，并为 LazyGridScope 创建类似的扩展。

【讨论】：