Jetpack Compose：嵌套NavGraph与BottomNavBar联动选中状态实现

要实现Instagram式的底部导航行为——进入同一嵌套NavGraph下的子页面时，对应底部项保持选中，核心是通过目的地层级判断归属，而非直接匹配单个页面route，具体步骤如下：

• 统一嵌套NavGraph的标识
  给每个嵌套NavGraph设置唯一的route（比如home_graph、explore_graph、profile_graph），确保其下所有子页面的目的地都属于这个Graph的层级。

• 基于目的地层级判断选中状态
  不要直接用navController.currentDestination?.route == bottomNavItem.route来判断选中，而是通过currentDestination?.hierarchy?.any { it.route == bottomNavItem.route }检查当前页面是否在目标NavGraph的层级链中。

• 完整实现示例
  先定义底部导航项的数据类：

  data class BottomNavItem(
      val route: String,
      val icon: ImageVector,
      val label: String
  )
  
  val bottomNavItems = listOf(
      BottomNavItem("home_graph", Icons.Filled.Home, "首页"),
      BottomNavItem("explore_graph", Icons.Filled.Search, "发现"),
      BottomNavItem("profile_graph", Icons.Filled.Person, "我的")
  )
  

  构建包含嵌套Graph的NavHost：

  NavHost(navController = navController, startDestination = "home_graph") {
      navigation(route = "home_graph", startDestination = "feed") {
          composable("feed") { FeedScreen() }
          composable("comments/{postId}") { CommentsScreen() }
      }
      navigation(route = "explore_graph", startDestination = "explore") {
          composable("explore") { ExploreScreen() }
          composable("search_results") { SearchResultsScreen() }
      }
      navigation(route = "profile_graph", startDestination = "profile") {
          composable("profile") { ProfileScreen() }
          composable("settings") { SettingsScreen() }
      }
  }
  

  最后实现BottomNavigation：

  BottomNavigation {
      val navBackStackEntry by navController.currentBackStackEntryAsState()
      val currentDestination = navBackStackEntry?.destination
  
      bottomNavItems.forEach { item ->
          BottomNavigationItem(
              icon = { Icon(item.icon, contentDescription = item.label) },
              label = { Text(item.label) },
              selected = currentDestination?.hierarchy?.any { it.route == item.route } == true,
              onClick = {
                  navController.navigate(item.route) {
                      // 避免重复导航、优化栈行为
                      popUpTo(navController.graph.startDestinationId) {
                          saveState = true
                      }
                      launchSingleTop = true
                      restoreState = true
                  }
              }
          )
      }
  }
  

这样处理后，不管进入HomeGraph下的feed还是comments页面，底部的Home项都会保持选中状态，完全匹配Instagram的导航行为。

内容的提问来源于stack exchange，提问作者HavanaSun