使用撰写导航导航时，惰性列闪烁

Question

我设置了导航、分页并使用流将 ui 与模型连接起来。如果简化，我的屏幕代码如下所示：

@Composable
MainScreen() {
    val listState = rememberLazyListState()
    val lazyItems = Pager(PagingConfig(...)) { ... }
        .flow
        .cachedIn(viewModelScope)
        .collectAsLazyPagingItems()

    LazyColumn(state = listState) {
        items(lazyItems, key = { it.id }) { ... }
    }
}

这是我的 NavHost 代码：

NavHost(navController, startDestination = "mainScreen") {
    composable("mainScreen") {
        MainScreen()
    }
}

但是当我从另一个屏幕导航回 MainScreen 或只是打开抽屉时，数据再次从 DataSource 加载，我看到 LazyColumn 明显闪烁。

如何避免重新加载数据？

Answer 1

您的代码给了我cachedIn 的以下错误：

不应在合成中调用流运算符函数

您不应忽视此类警告。

在过渡期间撰写导航会多次重组消失和出现的视图。这是预期的行为。

您的代码会在每次重组时创建一个新的Pager，这会导致问题。

解决它的最简单方法是使用remember：它会在重组之间缓存寻呼机流：

val lazyItems = remember {
    Pager(PagingConfig(/* ... */)) { /* ... */ }
        .flow
        .cachedIn(viewModelScope)
        .collectAsLazyPagingItems()
}

但它仍然会在配置更改期间重置，例如设备旋转。防止这种情况的最佳方法是将这个逻辑移到视图模型中：

class MainScreenViewModel : ViewModel() {
    val pagingFlow = Pager(PagingConfig(/* ... */)) { /* ... */ }
        .flow
        .cachedIn(viewModelScope)
}

@Composable
fun MainScreen(
    viewModel = viewModel<MainScreenViewModel>()
) {
    val lazyItems = viewModel.pagingFlow.collectAsLazyPagingItems()
}