如何在Jetpack Compose导航栈中仅保留一个可组合屏幕？

核心需求 #

平板端双面板布局，左侧按钮切换右侧页面时，要求：

• 栈中始终仅保留当前页面，点击一次返回即可退出
• 重复点击同一按钮时，不触发页面重绘

官方实现方案 #

1. 正确配置导航参数 #

结合popUpTo和launchSingleTop，再配合官方路由判断逻辑，即可实现需求：

val navigator: NavHostController = rememberNavController()

// 官方方式获取当前路由
private fun getCurrentRoute(): String? {
    return navigator.currentDestination?.route
}

appNavigationEventReceiver.languageSettingsScreen = { route ->
    val targetRoute = route.buildRoute()
    // 仅当当前路由与目标路由不同时执行导航
    if (getCurrentRoute() != targetRoute) {
        navigator.navigate(targetRoute) {
            // 清空栈中所有页面（包括起始页），确保栈中仅保留新页面
            popUpTo(navigator.graph.startDestinationId) { inclusive = true }
            // 若目标页已在栈顶，不重复创建实例
            launchSingleTop = true
        }
    }
}

appNavigationEventReceiver.deviceSettingsScreen = { route ->
    val targetRoute = route.buildRoute()
    if (getCurrentRoute() != targetRoute) {
        navigator.navigate(targetRoute) {
            popUpTo(navigator.graph.startDestinationId) { inclusive = true }
            launchSingleTop = true
        }
    }
}

2. 问题根源解析 #

• 首次尝试中popUpTo(DeviceSettingScreenRoute.buildRoute())无效：目标路由尚未入栈，popUpTo无法找到对应目的地，导致新页面叠加在原页面上
• 后续添加launchSingleTop = true仍重绘：未判断当前路由与目标路由是否一致，重复调用navigate会触发导航事件，即使页面未重建也可能引发重绘

3. 可选简化方案（Nav 2.4+） #

从Navigation Compose 2.4.0-alpha01开始，支持replace操作替换栈顶页面，配合popUpTo可实现相同效果：

if (getCurrentRoute() != targetRoute) {
    navigator.replace(targetRoute) {
        popUpTo(navigator.graph.startDestinationId) { inclusive = true }
    }
}

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