Jetpack Compose路由切换时BottomBar无法隐藏的问题排查

你遇到的问题是因为当前路由的实际值和模板路由不匹配：

• AnimeScreen.DetailAnime.route 是模板字符串 "detail/{animeId}"
• 但你导航到详情页时，实际路由是类似 "detail/123" 这种带具体参数的字符串，直接用 != 判断永远不会成立。
  另外，若你没有正确监听路由变化，currentRoute 可能不会随导航更新，导致界面不重组。

步骤1：正确监听当前路由变化 #

使用 navController.currentBackStackEntryAsState() 实时获取当前路由，确保路由变化时触发界面重组：

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

步骤2：准确判断是否处于详情页 #

利用导航目的地的层级关系（hierarchy）匹配模板路由，不管参数是什么，都能正确识别详情页：

val isDetailScreen = currentDestination?.hierarchy?.any { 
    it.route == AnimeScreen.DetailAnime.route 
} == true

步骤3：更新BottomBar的显示逻辑 #

把原判断替换为上面的 isDetailScreen：

bottomBar = {
    if (!isDetailScreen) {
        AnimeBottomBar(navController = navController, backgroundColor = backgroundColor)
    }
}

完整修改后的Scaffold代码片段 #

// 新增路由监听逻辑
val navBackStackEntry by navController.currentBackStackEntryAsState()
val isDetailScreen = navBackStackEntry?.destination?.hierarchy?.any { 
    it.route == AnimeScreen.DetailAnime.route 
} == true

Scaffold(
    topBar = {
        TopAppBar(
            title = {
                Text(text = "LeleNime", color = Color.White)
            }, backgroundColor = backgroundColor
        )
    },
    modifier = modifier,
    bottomBar = {
        if (!isDetailScreen) {
            AnimeBottomBar(navController = navController, backgroundColor = backgroundColor)
        }
    },
    scaffoldState = scaffoldState
) { paddingValues ->
    // 原NavHost代码保持不变
    NavHost(
        navController = navController,
        startDestination = AnimeScreen.Dashboard.route,
        modifier = modifier.padding(paddingValues)
    ) {
        composable(AnimeScreen.Dashboard.route) {
            DashboardScreen(onClicked = { animeId ->
                navController.navigate(AnimeScreen.DetailAnime.createRoute(animeId))
            })
        }
        composable(AnimeScreen.Explore.route) {
            ExploreAnimeScreen()
        }
        composable(AnimeScreen.MyList.route) {
            MyListScreen()
        }
        composable(
            route = AnimeScreen.DetailAnime.route,
            arguments = listOf(navArgument("animeId") {
                type = NavType.IntType
            })
        ) {
            val id = it.arguments?.getInt("animeId") ?: 0
            DetailAnimeScreen(id)
        }
    }
}

替代方案（简单匹配路由前缀） #

若不想用层级判断，也可以直接检查路由前缀：

val currentRoute = navBackStackEntry?.destination?.route
val isDetailScreen = currentRoute?.startsWith("detail/") == true

这种方式更简洁，但如果后续路由结构调整（如添加嵌套路由），可能需要修改判断逻辑。

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