如何正确实现带BottomBar的Android多层屏幕导航及解决动画问题？

核心思路 #

抛弃单个Scaffold嵌套NavigationHost并动态隐藏BottomBar的模式，改用双层导航结构：

• 底层为带固定BottomBar的主标签页导航容器，仅处理一级标签页切换
• 上层为全局导航栈，专门承载二级页面，直接覆盖在底层容器之上。从根源避免BottomBar动画与页面切换的时序冲突，同时解决ModalBottomSheet的层级问题。

具体实现步骤 #

1. 划分导航路由层级 #

先将路由明确分为两类：

• 主标签页路由：如Home、Discover、Profile、Settings
• 二级页面路由：如ArticleDetail、UserInfo、SettingsAdvanced

2. 实现底层主标签页导航容器 #

用Scaffold包裹主标签页专属的NavigationHost，BottomBar始终显示：

@Composable
fun MainTabNavigation(navController: NavHostController) {
    Scaffold(
        bottomBar = {
            BottomBar(
                tabs = listOf(Home, Discover, Profile, Settings),
                currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route,
                onTabSelected = { route ->
                    navController.navigate(route) {
                        popUpTo(navController.graph.startDestinationId) { saveState = true }
                        launchSingleTop = true
                        restoreState = true
                    }
                }
            )
        }
    ) { padding ->
        NavHost(
            navController = navController,
            startDestination = Home.route,
            modifier = Modifier.padding(padding)
        ) {
            composable(Home.route) { 
                HomeScreen(onNavigateToDetail = { articleId ->
                    // 调用全局导航控制器跳转二级页面
                    GlobalNavController.navigate("${ArticleDetail.route}/$articleId")
                }) 
            }
            composable(Discover.route) { DiscoverScreen() }
            composable(Profile.route) { ProfileScreen() }
            composable(Settings.route) { SettingsScreen() }
        }
    }
}

3. 实现上层全局导航栈 #

单独创建全局NavHost，设置zIndex确保它覆盖在主导航之上，二级页面无需嵌套Scaffold：

@Composable
fun GlobalNavigation(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = MainTabs.route,
        modifier = Modifier.zIndex(1f)
    ) {
        // 嵌套主标签页导航作为全局栈初始目的地
        composable(MainTabs.route) {
            MainTabNavigation(navController = rememberNavController())
        }
        // 注册所有二级页面路由
        composable("${ArticleDetail.route}/{articleId}") { backStackEntry ->
            val articleId = backStackEntry.arguments?.getString("articleId") ?: ""
            ArticleDetailScreen(onBackPressed = { navController.popBackStack() })
        }
        composable(UserInfo.route) {
            UserInfoScreen(onBackPressed = { navController.popBackStack() })
        }
    }
}

4. 修复ModalBottomSheetLayout层级问题 #

在主标签页的屏幕内，将ModalBottomSheetLayout放在Scaffold的content区域内部，确保它显示在BottomBar之上：

@Composable
fun HomeScreen(onNavigateToDetail: (String) -> Unit) {
    val sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetState = sheetState,
        sheetContent = { BottomSheetContent() }
    ) {
        Column(Modifier.fillMaxSize()) {
            Button(onClick = { scope.launch { sheetState.show() } }) {
                Text("打开底部弹窗")
            }
            // 主页其他内容
        }
    }
}

方案优势说明 #

• 解决动画卡顿：二级页面打开时BottomBar完全无需变动，直接在主导航上方加载新页面，彻底避免BottomBar下滑与页面切换的时序冲突，低速设备也不会出现中间过渡的异常状态。
• 解决ModalBottomSheet暴露问题：主标签页的弹窗布局本身就处于Scaffold内部、BottomBar之上，切换二级页面时BottomBar不会下滑，自然不会暴露弹窗内容。

补充说明 #

NowInAndroid采用隐藏BottomBar的实现，是因为它的部分二级页面需要复用主Scaffold的顶部栏。如果你的二级页面完全独立，不需要主Scaffold的元素，双层导航结构是更优选择；若需复用顶部栏，可在全局导航的二级页面中单独实现，或把顶部栏提升到全局导航容器中。

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