LazyVerticalGrid分页异常：仅加载前两页问题求助

问题描述 #

我在Jetpack Compose的LazyVerticalGrid中实现分页功能，此前已在LazyColumn中成功完成该功能，但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() }
                            )
                        }
                    }
                }
            }
        })
}

问题原因与修复方案 #

问题出在两个核心点：

1. 使用items(lazyTMDbItems.itemCount)的方式，无法让Compose正确感知分页数据的动态更新，导致后续页面的加载触发逻辑失效。
2. peek(index)仅获取已加载的数据，不会触发Paging库的预加载机制，无法告知库需要加载下一页数据。

正确的做法是使用Paging库为Compose提供的items(LazyPagingItems)扩展方法，它内部已处理数据更新与预加载逻辑，同时通过lazyTMDbItems[index]触发加载监听。

修复后的条目渲染代码替换如下：

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

加载状态的处理部分可保持不变，修改后LazyVerticalGrid就能正常触发后续页面的加载了。

内容的提问来源于stack exchange，提问作者Ali