Jetpack Compose单页跳转带底部导航页再跳转无导航栏单页的实现问题

核心架构逻辑 #

你需要拆分两层导航控制器：

• 根NavController：管理无底部导航的页面，包括启动页、底部导航容器页、所有详情页
• 底部导航内部子NavController：管理带底部导航的5个Tab页（Home/Search/Cart等）

代码调整步骤 #

1. 重构根导航图 #

首先统一路由常量，把所有无底部导航的页面都放在根导航图中：

// 统一路由常量定义
sealed class Screen(val route: String) {
    object Splash : Screen("splash")
    object BottomNavContainer : Screen("bottom_nav_container")
    // 所有无底部导航的详情页统一在此定义
    object HomeDetail : Screen("home_detail")
    object GoodsDetail : Screen("goods_detail/{goodsId}") // 带参数示例
}

@Composable
fun SetupNavGraph(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = Screen.Splash.route
    ) {
        // 启动页
        composable(Screen.Splash.route) {
            SplashScreen(navController = navController)
        }
        // 带底部导航的主容器页
        composable(Screen.BottomNavContainer.route) {
            // 把根导航控制器传入底部导航容器，供子页面跳转详情用
            BottomNavScreen(rootNavController = navController)
        }
        // 详情页全部放在根导航，不会显示底部栏
        composable(Screen.HomeDetail.route) {
            HomeDetailScreen()
        }
        composable(Screen.GoodsDetail.route) { backStack ->
            val goodsId = backStack.arguments?.getString("goodsId")
            GoodsDetailScreen(goodsId = goodsId)
        }
    }
}

调整启动页跳转逻辑，避免返回键回到启动页：

@Composable
fun SplashScreen(navController: NavController) {
    LaunchedEffect(key1 = true){
        delay(3000L)
        navController.navigate(Screen.BottomNavContainer.route) {
            popUpTo(Screen.Splash.route) { inclusive = true }
        }
    }
    Scaffold {
        Text(
            "Splash Screen", style = MaterialTheme.typography.h4,
            modifier = Modifier.padding(it)
        )
    }
}

2. 完善底部导航容器逻辑 #

在BottomNavScreen内部配置子NavHost管理Tab页面，底部导航的跳转使用子导航控制器：

val navItems = listOf<NavItem>(
    NavItem(label = "Home", route = "home", icon = Icons.Default.Home),
    NavItem(label = "Search", route = "search", icon = Icons.Default.Search),
    NavItem(label = "Cart", route = "cart", icon = Icons.Default.ShoppingBag),
    NavItem(label = "History", route = "history", icon = Icons.Default.Notes),
    NavItem(label = "Profile", route = "profile", icon = Icons.Default.Person),
)

@Composable
fun BottomNavScreen(rootNavController: NavController) {
    // Tab页专用的子导航控制器
    val tabNavController = rememberNavController()
    // 监听当前Tab路由，高亮选中项
    val currentRoute = tabNavController.currentBackStackEntryAsState().value?.destination?.route
    Scaffold(
        backgroundColor = Color.LightGray,
        bottomBar = {
            CustomBottomNavBar(
                items = navItems,
                selectedRoute = currentRoute
            ) { navItem ->
                // Tab切换用子导航控制器
                tabNavController.navigate(navItem.route) {
                    popUpTo(tabNavController.graph.findStartDestination().id) {
                        saveState = true
                    }
                    launchSingleTop = true
                    restoreState = true
                }
            }
        }
    ) { paddingValues ->
        // 配置Tab子导航
        NavHost(
            navController = tabNavController,
            startDestination = navItems.first().route,
            modifier = Modifier.padding(paddingValues)
        ) {
            composable("home") {
                HomeScreen(rootNavController = rootNavController)
            }
            composable("search") {
                SearchScreen(rootNavController = rootNavController)
            }
            composable("cart") { CartScreen() }
            composable("history") { HistoryScreen() }
            composable("profile") { ProfileScreen() }
        }
    }
}

3. 实现Tab页跳转详情逻辑 #

在Tab子页面中直接使用传入的根导航控制器跳转详情页，自动隐藏底部导航：

@Composable
fun HomeScreen(rootNavController: NavController) {
    Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center) {
        Text("首页", style = MaterialTheme.typography.h4, modifier = Modifier.align(Alignment.CenterHorizontally))
        Button(
            onClick = { rootNavController.navigate(Screen.HomeDetail.route) },
            modifier = Modifier.align(Alignment.CenterHorizontally).padding(top = 20.dp)
        ) {
            Text("跳转到无底部栏的详情页")
        }
    }
}

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