android - 使用 Jetpack Compose Navigation 导航到另一个 Composable 后记住 List State 的最佳实践

问题描述

当从 Composable A -> Composable B 导航时，说 Composable A 是一个向下滚动的惰性列表，而 Composable B 是一个惰性列表项详细信息屏幕。目前，惰性列表滚动位置没有被存储，当从 B 导航回 Composable 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()
                    )
                }
            }
        }
    }

标签： androidkotlinandroid-jetpack-compose

android - 使用 Jetpack Compose Navigation 导航到另一个 Composable 后记住 List State 的最佳实践

问题描述

解决方案

推荐阅读