Jetpack Compose中BottomNavigationBar切换时页面不显示求助

问题原因 #

你的代码里有两个核心问题导致页面内容空白：

• NavHost位置错误：你在MainScreen里先调用了BottomNavGraph（也就是NavHost），然后再创建Scaffold，这会导致NavHost被Scaffold覆盖——Compose按顺序布局，后面的组件会叠在前面的组件上方，最终只有Scaffold显示出来。
• Scaffold内容区域未使用：Scaffold的content lambda里只是计算了padding值，但没有放置任何内容，也没有将NavHost放在这个区域内，导致页面没有实际内容可显示。

修复后的MainScreen代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScreen() {
    val navHostController = rememberNavController()
    val screens = listOf(
        BottomBarScreen.Home,
        BottomBarScreen.Profile,
        BottomBarScreen.Settings
    )
    val navBackStackEntry by navHostController.currentBackStackEntryAsState()
    val currentDestination = navBackStackEntry?.destination

    Scaffold(
        bottomBar = {
            NavigationBar {
                screens.forEachIndexed { index, bottomBarScreen ->
                    NavigationBarItem(
                        selected = currentDestination?.hierarchy?.any {
                            it.route == bottomBarScreen.route
                        } == true,
                        label = { Text(text = bottomBarScreen.title) },
                        onClick = {
                            navHostController.navigate(bottomBarScreen.route) {
                                // 避免重复添加相同目的地到回退栈，保留页面状态
                                popUpTo(navHostController.graph.startDestinationId) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        },
                        icon = {
                            Icon(
                                imageVector = bottomBarScreen.icon,
                                contentDescription = bottomBarScreen.title
                            )
                        }
                    )
                }
            }
        }
    ) { innerPadding ->
        // 将NavHost放在Scaffold的content区域，并应用padding避免被底部导航栏遮挡
        BottomNavGraph(
            navHostController = navHostController,
            modifier = Modifier.padding(innerPadding)
        )
    }
}

配套修改BottomNavGraph #

需要给BottomNavGraph添加modifier参数，用于接收Scaffold的内边距：

@Composable
fun BottomNavGraph(
    navHostController: NavHostController,
    modifier: Modifier = Modifier
) {
    NavHost(
        navController = navHostController,
        startDestination = BottomBarScreen.Home.route,
        modifier = modifier.fillMaxSize()
    ) {
        composable(route = BottomBarScreen.Home.route) {
            HomeThirdScreen()
        }
        composable(route = BottomBarScreen.Profile.route) {
            ProfileScreen()
        }
        composable(route = BottomBarScreen.Settings.route) {
            SettingsScreen()
        }
    }
}

其他代码无需修改 #

你的Home、Profile、Settings页面以及BottomBarScreen密封类的代码都是正确的，保持原样即可。

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