Jetpack Compose页面导航异常求助：点击按钮无界面切换

问题根源 #

你在MainActivity的setContent代码中，在NavHost之后额外渲染了一个Surface包裹的Greeting组件。Compose的UI按代码顺序绘制，后续组件会覆盖在之前的组件之上，这导致NavHost内部的页面切换完全被上层的Greeting遮挡——即使导航逻辑正常执行（目标页面函数被调用），界面也不会有任何变化。

修正后的代码 #

将MainActivity中多余的Surface和Greeting代码移除，仅保留NavHost即可：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ToDoApp2Theme {
                val navController = rememberNavController()
                NavHost(navController = navController, startDestination = Screens.HomeScreen.route) {
                    composable(route = Screens.HomeScreen.route){ Greeting(navController) }
                    composable(route = Screens.AddScreen.route){ Add_screen(navController) }
                }
                // 移除以下多余代码
                /*Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting(navController)
                }*/
            }
        }
    }
}

原理说明 #

NavHost是Jetpack Compose导航组件的核心容器，它会根据navController的当前路由自动渲染对应页面的Composable。你之前的写法相当于在导航容器上方强制叠加了固定的Greeting页面，完全遮挡了容器内的内容变化。移除多余代码后，NavHost就能正常管理页面切换逻辑，点击按钮即可跳转到目标页面。

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