Jetpack Compose - 使用帶有 BottomNavBar 的嵌套 NavGraph 並選擇圖標

Question

我想用 3 個項目實現一個 BottomNavBar。 每個導航到一個新的 navGraph。 （嵌套導航）

主頁 = "主頁圖"

探索 =“探索圖”

配置文件 = “配置文件圖”

主圖：

@OptIn(ExperimentalAnimationApi::class)
fun NavGraphBuilder.addHomeGraph(navController: NavHostController) {

    navigation(
        startDestination = "feed",
        route = "HomeGraph"
    ) {
        composable(
            route = "feed"
        ) {
        }
        composable(
            route = "comments"
        ) {
        }

    }
}

我的 BottomNavBar 在這 3 個圖表之間導航：

@Composable
fun BottomNavigationBar(navController: NavController) {
    val items = listOf(
        BottomNavigationItem.HomeGraph,
        BottomNavigationItem.ExploreGraph, 
        BottomNavigationItem.ProfileGraph
    )

    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route 


    BottomNavigation() { 
        Row(horizontalArrangement = Arrangement.Center) {

            items.forEach { item ->  
                BottomNavigationItem(
                    icon = {
                        if (currentRoute == item.route) {
                            Icon(
                                painterResource(id = item.iconPressed),
                                contentDescription = item.title
                            )
                        } else {
                            Icon(
                                painterResource(id = item.iconNormal),
                                contentDescription = item.title
                            )
                        }
                    },
                    selectedContentColor = MaterialTheme.colors.primary,
                    unselectedContentColor = MaterialTheme.colors.onSurface,
                    alwaysShowLabel = false,
                    selected = currentRoute == item.route,
                    onClick = {
 
                        navController.navigate(item.route) {

                            navController.graph.startDestinationRoute?.let { route ->
                                popUpTo(route) {
                                    saveState = true
                                }
                            }
                            launchSingleTop = true
                            restoreState = true
                        }
                    }
                )
            }

        }
    }
}

現在的問題是我的“Home”BottomNav 圖標沒有改變，因為“selected”永遠不會是真的。

selected = currentRoute == item.route,

如何檢查我是否仍在同一個 navigationGraph 上？ 因此，當我 go 向下“HomeGraph”例如“feed”或“comments”時，它仍應在我的 BottomNavBar 上指示“Home”圖標為選中狀態。

“feed”和“Comments”有共同點，它們的父 NavGraph 被稱為“HomeGraph”，我該如何檢查呢？

換句話說：我想要與 Instagram 幾乎相同的 BottomNavBar 行為

Answer 1

不要匹配navBackStackEntry?.destination?.route ，而是嘗試在 NavDestination 的層次結構中查找您的路線。

val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentDestination = navBackStackEntry?.destination

然后在你的 forEach 中：

val selected = currentDestination?.hierarchy?.any { it.route == item.route } == true