在Compose Multiplatform中如何仅在子导航图显示导航栏？

在Compose Navigation中，你之前尝试的嵌套NavHost是错误的做法——同一个NavController不能绑定多个NavHost，这会导致导航栈逻辑混乱。正确的方式是使用**嵌套导航图（Nested Nav Graphs）**来组织你的导航结构，同时把底部导航栏放在主导航图的父容器中，这样就能自然实现仅主导航图页面显示导航栏的需求。

步骤1：定义清晰的导航目标（Destination） #

先整理你的导航目标为密封类，明确区分顶层页面和主导航内的子页面：

sealed class Destination {
    object Splash : Destination()
    object Auth : Destination()
    sealed class Main : Destination() {
        object Home : Main()
        object Settings : Main()
    }
}

步骤2：使用嵌套导航图构建主导航结构 #

在主NavHost中，用navigation DSL块定义主导航图，而非嵌套NavHost。同时，将底部导航栏仅包裹在主导航图的父容器内：

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = Destination.Splash) {
        // 顶层页面：启动页、认证页，无导航栏
        composable<Destination.Splash> {
            SplashScreenRoot(onNavigateToAuth = {
                navController.navigate(Destination.Auth)
            }, onNavigateToMain = {
                navController.navigate(Destination.Main.Home) {
                    popUpTo(Destination.Splash) { inclusive = true }
                }
            })
        }

        composable<Destination.Auth> {
            AuthScreenRoot(onAuthSuccess = {
                navController.navigate(Destination.Main.Home) {
                    popUpTo(Destination.Auth) { inclusive = true }
                }
            })
        }

        // 主导航图：包含首页、设置页，底部导航栏仅在此图内显示
        navigation<Destination.Main.Home>(startDestination = Destination.Main.Home) {
            composable<Destination.Main.Home> {
                // 包裹在带导航栏的容器中
                MainScreenContainer(
                    currentDestination = Destination.Main.Home,
                    onNavigate = { destination ->
                        navController.navigate(destination)
                    }
                ) {
                    HomeScreenRoot()
                }
            }

            composable<Destination.Main.Settings> {
                MainScreenContainer(
                    currentDestination = Destination.Main.Settings,
                    onNavigate = { destination ->
                        navController.navigate(destination)
                    }
                ) {
                    SettingsScreenRoot()
                }
            }
        }
    }
}

步骤3：实现主导航容器（带底部导航栏） #

创建一个通用的容器可组合项，专门用于包裹主导航图内的页面，统一显示底部导航栏：

@Composable
fun MainScreenContainer(
    currentDestination: Destination.Main,
    onNavigate: (Destination.Main) -> Unit,
    content: @Composable () -> Unit
) {
    Column(Modifier.fillMaxSize()) {
        // 页面内容占满剩余空间
        Box(Modifier.weight(1f)) {
            content()
        }
        // 底部导航栏
        BottomNavigation {
            BottomNavigationItem(
                selected = currentDestination is Destination.Main.Home,
                onClick = { onNavigate(Destination.Main.Home) },
                icon = { Icon(Icons.Default.Home, contentDescription = "首页") },
                label = { Text("首页") }
            )
            BottomNavigationItem(
                selected = currentDestination is Destination.Main.Settings,
                onClick = { onNavigate(Destination.Main.Settings) },
                icon = { Icon(Icons.Default.Settings, contentDescription = "设置") },
                label = { Text("设置") }
            )
        }
    }
}

为什么这个方案更优雅？ #

• 导航结构分层清晰：顶层页面（启动、认证）和主导航图完全分离，符合Compose Navigation的设计理念。
• 无需手动判断路由：主导航图内的所有页面自动继承底部导航栏，不需要监听navController.currentBackStackEntryAsState()来控制显隐，避免了冗余的状态判断。
• 导航栈逻辑正确：所有导航操作都由同一个NavController管理，不会出现栈混乱的问题。

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