Jetpack Compose 嵌套导航场景下底部导航栏对应图标未选中问题咨询

原实现的底部导航选中态判断直接读取当前返回栈顶的页面路由（itemList），而tab定义的路由是嵌套导航图本身的路由（order），两者不匹配。当Order作为嵌套导航图加载后，栈顶始终是图内部的子页面路由，因此永远无法和tab配置的order路由匹配，导致选中态失效。

1. 重构选中态判断逻辑 #

不再直接取栈顶页面的路由，而是沿着当前返回栈条目的导航层级向上查找，只要栈顶页面属于某个tab对应的导航图，就判定该tab为选中。
添加通用的路由查找工具函数：

// 沿导航层级向上查找所属的顶层tab路由
fun NavBackStackEntry?.findAssociatedTabRoute(): String? {
    var currentDestination = this?.destination
    // 预先定义所有底部导航的tab路由集合
    val tabRoutes = setOf(Destinations.ORDER_ROUTE, Destinations.ACCOUNT_ROUTE)
    while (currentDestination != null) {
        if (currentDestination.route in tabRoutes) {
            return currentDestination.route
        }
        // 继续向上找父级导航图
        currentDestination = currentDestination.parent
    }
    return null
}

在MyApp组件中替换原来的路由读取逻辑：

@Composable
fun MyApp() {
    MyAppTheme {
        val navController = rememberNavController()
        val tabs = listOf(Destinations.ORDER_ROUTE, Destinations.ACCOUNT_ROUTE)
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        // 替换原来的直接取route的逻辑，用自定义函数查找所属tab
        val currentSelectedTab = navBackStackEntry.findAssociatedTabRoute()

        Scaffold(
            bottomBar = {
                BottomNavigation {
                    tabs.forEach { tab ->
                        BottomNavigationItem(
                            icon = { Icons.Filled.Favorite },
                            label = { Text(tab) },
                            // 用查找得到的所属tab做选中判断
                            selected = currentSelectedTab == tab,
                            onClick = { /* 跳转逻辑后续改造 */ },
                            alwaysShowLabel = true,
                            selectedContentColor = MaterialTheme.colors.secondary,
                            unselectedContentColor = LocalContentColor.current
                        )
                    }
                }
            }
        ) {
            NavGraph(navController)
        }
    }
}

2. 规范tab跳转逻辑 #

原实现的跳转配置缺少状态保存和恢复能力，调整onClick的导航参数，适配嵌套导航图的场景：

onClick = { targetTab ->
    navController.navigate(targetTab) {
        // 弹栈到全局导航的起始目的地，保存之前的页面状态
        popUpTo(navController.graph.findStartDestination().id) {
            saveState = true
        }
        // 避免重复创建同一tab的实例
        launchSingleTop = true
        // 切tab时恢复之前保存的页面状态
        restoreState = true
    }
}

• 结构统一：每个底部导航tab对应一个独立的顶层嵌套导航图，哪怕tab当前只有单个页面，也建议用navigation块包裹，后续扩展子页面时无需调整整个导航结构
• 选中态判定规则：只要当前栈顶页面属于某tab对应的导航图（无论在图内的哪一层子页面），该tab都保持选中，不要仅用栈顶页面路由做匹配
• 跳转配置固定三要素：
  • 配popUpTo + saveState，切tab时不销毁旧页面的状态
  • 配launchSingleTop，防止重复点击tab生成重复的页面实例
  • 配restoreState，切回tab时恢复之前的页面浏览位置（比如从商品列表点进详情页，切走再切回时仍停留在详情页，而不是回到列表）
• 嵌套图的起始目的地单独配置：每个tab对应的嵌套导航图要设置自己的startDestination，保证首次进入tab时直接展示默认页面

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