如何在底部導航 Jetpack Compose 中保存嵌套導航圖 id 的目的地？

Question

我在 Jetpack Compose 中遇到了導航返回堆棧的一些問題。 下圖是我想要的場景。

我有底欄和兩個項目主頁和設置。 我想把它們都做成嵌套圖。 在 HomeNavGraph 中，HomeRootScreen 是 startDestination，可以導航到 HomeDetail1Screen 和 HomeDetail2。 設置選項卡也很喜歡。 我想保存那些嵌套的圖形狀態，例如當我單擊 HomeRoot -> HomeDetail1 -> HomeDetail2 時，當時我單擊 BottomBar 中的設置選項卡。 然后單擊返回主頁，我希望我當前的屏幕為 HomeDeatil2Screen。

以下是我的代碼。 這是我的目的地 class。

    sealed class Destinations(
    val route: String
) {
    object HomeRoot : Destinations(route = "home_root_screen")
    object HomeDetail1 : Destinations(route = "home_detail1_screen")
    object HomeDetail2 : Destinations(route = "home_detail2_screen")

    object SettingRoot : Destinations(route = "setting_root_screen")
    object SettingDetail1 : Destinations(route = "setting_detail1_screen")
    object SettingDetail2 : Destinations(route = "setting_detail2_screen")
}

const val BOTTOM_NAV_ROUTE = "btn_nav"
const val HOME_ROUTE = "home"
const val SETTING_ROUTE = "setting"

這是我的 BottomBarNavGraph。

@Composable
fun BottomBarNavGraph(
    navController: NavHostController
) {
    NavHost(
        navController = navController,
        startDestination = HOME_ROUTE,
        route = BOTTOM_NAV_ROUTE
    ) {
        homeNavGraph(navController)
        settingNavGraph(navController)
    }
}

這是 HomeNavGraph。

fun NavGraphBuilder.homeNavGraph(
    navController: NavHostController
) {
    navigation(
        startDestination = Destinations.HomeRoot.route,
        route = HOME_ROUTE
    ) {
        composable(route = Destinations.HomeRoot.route) { HomeScreen(navController = navController) }
        composable(route = Destinations.HomeDetail1.route + "/{argText}") {
            val arg = it.arguments?.getString("argText") ?: "Nothing Typed"
            HomeDetail1Screen(
                text = arg,
                navController = navController
            )
        }
        composable(route = Destinations.HomeDetail2.route) { HomeDetail2Screen(navController = navController) }
    }
}

這是設置導航圖。

fun NavGraphBuilder.settingNavGraph(
    navController: NavHostController
) {
    navigation(
        startDestination = Destinations.SettingRoot.route,
        route = SETTING_ROUTE
    ) {
        composable(
            route = Destinations.SettingRoot.route
        ) {
            SettingScreen(navController = navController)
        }
        composable(
            route = Destinations.SettingDetail1.route
        ) {
            SettingDetail1Screen(navController = navController)
        }
        composable(
            route = Destinations.SettingDetail2.route
        ) {
            SettingDetail2Screen(navController = navController)
        }
    }

}

這是我的 BottomBarDestinations。

sealed class BottomBarDestinations(
    val route: String,
    val title: String,
    val icon: ImageVector

) {
    object Home : BottomBarDestinations(
        route = HOME_ROUTE,
        title = "Home",
        icon = Icons.Default.Home
    )

    object Setting : BottomBarDestinations(
        route = SETTING_ROUTE,
        title = "Setting",
        icon = Icons.Default.Settings
    )
}

以下是我在 navHost 中對 BottomBar 的設置。

@Composable
fun BottomBar(navController: NavHostController) {
    val screens = listOf(
        BottomBarDestinations.Home,
        BottomBarDestinations.Setting
    )
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentDestinations = navBackStackEntry?.destination

    BottomNavigation {
        screens.forEach {
            AddItem(
                screen = it,
                currentDestinations = currentDestinations,
                navController = navController
            )
        }
    }
}

@Composable
fun RowScope.AddItem(
    screen: BottomBarDestinations,
    currentDestinations: NavDestination?,
    navController: NavHostController
) {
    BottomNavigationItem(
        label = {
            Text(text = screen.title)
        },
        icon = {
            Icon(
                imageVector = screen.icon,
                contentDescription = "Nav Icon"
            )
        },
        selected = currentDestinations?.hierarchy?.any { it.route == screen.route } == true,
        unselectedContentColor = LocalContentColor.current.copy(
            alpha = ContentAlpha.disabled
        ),
        onClick = {
            navController.navigate(screen.route) {
                popUpTo(navController.graph.findStartDestination().id)
                launchSingleTop = true
                restoreState = true
            }
        }
    )
}

@Composable
fun MainScreen(
) {
    val navController = rememberNavController()
    Scaffold(bottomBar = {
        BottomBar(navController = navController)
    }) {
        BottomBarNavGraph(navController = navController)
    }
}

請幫我解決一下這個。 我和這個疊加。 如果你想查看源代碼。 你可以在分支機構檢查這個

底部導航圖

https://github.com/kyawlinnthant/JetpackComposeNavigationComponent/tree/nested_graph

Answer 1

如果你需要保存 state 的路線（屏幕）或圖表，你需要使用以下技術：

navController.navigate(screen.route) {
                popUpTo(navController.graph.findStartDestination().id){
                    inclusive = true
                    saveState = true
                }
                launchSingleTop = true
                restoreState = true
            }

順便說一句，我不能用

navController.graph.findStartDestination().id

我自己指定起始目的地（在你的情況下將是“home_root_screen”）。