Jetpack Compose导航异常：切换目标页面时视图消失

这种偶发的页面消失（仅显示青色背景的Surface），核心原因大概率是回退栈被意外清空，导致NavHost没有可显示的目标页面。以下是具体的排查和修复方案：

1. 防止重复操作导致栈异常 #

快速连续点击按钮会触发多次导航/弹出动作，可能把起始页First也弹出栈。给导航操作加判断逻辑：

• 跳转Second页面时，避免重复入栈：

// FirstScreen的点击事件修改
onButtonTap = {
    if (navController.currentDestination?.route != "Second") {
        navController.navigate("Second")
    }
}

• 弹出页面时，明确指定保留起始页：

// SecondScreen的点击事件修改
onButtonTap = {
    // inclusive=false 表示只弹出当前页面，保留First在栈中
    navController.popBackStack("First", inclusive = false)
}

2. 确保NavController的稳定性 #

虽然你的代码中rememberNavController()作用域正确，但极端情况下重组可能导致NavHost重置。可以将NavController提升到Activity级别持有，避免实例频繁重建：

class MainActivity : ComponentActivity() {
    private lateinit var navController: NavController

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            navController = rememberNavController()
            NavigationTestTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color.Cyan
                ) {
                    NavHost(navController = navController, startDestination = "First") {
                        // ... 原有路由定义
                    }
                }
            }
        }
    }
}

3. 规范路由定义避免错误 #

将路由字符串定义为常量，避免硬编码拼写错误：

// 定义路由常量
private const val ROUTE_FIRST = "First"
private const val ROUTE_SECOND = "Second"

// NavHost中使用常量
NavHost(navController = navController, startDestination = ROUTE_FIRST) {
    composable(route = ROUTE_FIRST) {
        FirstScreen(onButtonTap = { 
            if (navController.currentDestination?.route != ROUTE_SECOND) {
                navController.navigate(ROUTE_SECOND)
            }
        })
    }
    composable(route = ROUTE_SECOND) {
        SecondScreen(onButtonTap = { 
            navController.popBackStack(ROUTE_FIRST, inclusive = false)
        })
    }
}

4. 开启导航日志追踪问题 #

开启NavController日志，复现问题时查看回退栈变化：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 开启导航调试日志
    NavHostController.enableOnBackPressedChangedCallback = true
    setContent {
        // ... 原有内容
    }
}

在Logcat中过滤NavController相关日志，就能看到每次导航操作后回退栈的状态，精准定位异常原因。

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