Jetpack Compose应用Navigation点击按钮无法跳转页面问题咨询

代码中存在两个重复挂载的BodyContent实例，且导航核心组件NavHost未正确挂载到视图树：

• 第一个BodyContent嵌套在NavHost的Home路由下，绑定的navController与该NavHost关联，但该NavHost本身未被挂载到可见视图树中，对应内容不会渲染
• 第二个BodyContent直接放在Scaffold的内容槽中，该实例绑定的navController没有和任何可见的NavHost关联，跳转指令只会触发内部逻辑执行，不会触发页面切换渲染

将NavHost整体移入Scaffold的内容区域，删除重复的BodyContent挂载逻辑，修改后代码如下：

@Composable
fun MainLayout(viewModel: GoalsViewModel){
    val navController = rememberNavController()
    Scaffold(
        topBar = {
            TopNavBar()
        }
    ){ innerPadding ->
        NavHost(
            navController = navController,
            startDestination = "Home",
            modifier = Modifier
                .padding(innerPadding)
                .padding(horizontal = 16.dp)
        ) {
            composable("Home"){
                BodyContent(navController)
            }
            composable("Goals"){
                GoalScreen(viewModel, navController)
            }
            composable("ViewGoals"){
                ViewGoalsScreen(viewModel)
            }
            composable("Fitness"){
                FitnessForm()
            }
        }
    }
}

修复说明 #

• 移除了原代码中独立渲染的NavHost，以及Scaffold中直接挂载的BodyContent
• 用Scaffold传入的innerPadding处理顶部导航栏的内容避让，避免页面内容被TopNavBar遮挡
• BodyContent仅在NavHost的Home路由下挂载，所有跳转指令都会作用到当前可见的NavHost上，页面即可正常切换

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