Question

从可组合 A -> 可组合 B 导航时，假设可组合 A 是向下滚动到一半的惰性列表，而可组合 B 是惰性列表项详细信息屏幕。当前，惰性列表滚动位置未存储，当从 B 导航回可组合 A 时，列表从项目索引 0 开始。我们可以将其存储在 ViewModel 中，然后读取值，以及使用 rememberSaveable，但是，我不确定如何实现 rememberSaveable 以便它在返回导航后滚动到保存的位置。

哪种方法更适合使用以下良好的代码实践？

编辑：我的问题源于这样一个事实，即在从可组合 B 导航回 A 时未存储 listState。因此，如果我们滚动到底部并选择一个项目并查看其详细信息，当我们导航回列表时，它会滚动到顶部，而不是保存其滚动状态。

我的可组合

        val listState = rememberLazyListState()
        val showTitle by remember {
            derivedStateOf {
                listState.firstVisibleItemIndex > 0
            }
        }

        onShowTitle(showTitle) // don't show title when first list element is visible


        LazyColumn(
            state = listState,
            contentPadding = PaddingValues(16.dp)
        ) {

            item {
                Text("Header 1", style = MaterialTheme.typography.h4)
            }
            item {
                Column(Modifier.fillMaxWidth()) {

                    CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
                        Text(
                            "Description 1",
                            style = MaterialTheme.typography.subtitle1,
                            modifier = Modifier.padding(top = 8.dp)
                        )
                    }
                    Spacer(modifier = Modifier.height(48.dp))
                }
            }
            item {

                itemOfTheDay.value?.let { item->
                    ItemCardVertical(
                        item = item,
                        navigateToDetails = {
                            viewModel.selectItem(it)
                            navigateToDetails(it)
                        }
                    )
                    Spacer(modifier = Modifier.height(48.dp))
                }
            }
            item {
                Text("Header 2", style = MaterialTheme.typography.h5)

                Spacer(Modifier.size(16.dp))
            }
            item {


                StaggeredVerticalGrid(maxColumnWidth = 220.dp) {
                    items.value?.forEach { item->
                        ItemCard(item, navigateToDetails = {
                            viewModel.selectItem(it)
                            navigateToDetails(it)
                        })
                    }

我的导航图

 @Composable
    fun NavGraph(startDestination: String = "Items") {
        val navController = rememberNavController()

        val mainViewModel: MainViewModel = viewModel()
        NavHost(navController = navController, startDestination = startDestination) {

            navigation(route = "Items", startDestination = MAINSCREEN) {


                composable(MAINSCREEN) {
                   
                    MainScreen(mainViewModel,
                        navigateToDetails = { smoothie ->

                            navController.navigate(ITEMSDETAILSSCREEN)
                        }
                    )
                }
                composable(
                   ITEMDETAILSSCREEN
                ) {
      
                    ItemDetails(
                        viewModel = mainViewModel, modifier = Modifier
                            .fillMaxSize()
                            .navigationBarsPadding()
                    )
                }
            }
        }
    }

Answer 1

我将这个问题搁置一旁，以防其他人陷入我的困境，但代码按预期工作，我只是犯了一个愚蠢的错误。

我没有考虑异步图像加载时的高度变化，因此，列表在可组合导航时不会位于其保存位置，因为列表状态在返回可组合时小于屏幕高度。< /p>

然而，如果图像被赋予静态容器加载到不改变它们的大小，那么在返回导航时，组合项将正确显示保存的列表状态。

使用 Jetpack Compose Navigation 导航到另一个可组合后记住列表状态的最佳实践

1 个答案: