Compose中Scaffold导航宿主添加Spacer：透明底部栏适配问题

你遇到的问题核心在于两点：BottomBar默认背景不透明会遮挡下方Spacer，且原代码里的Spacer未设置宽度，视觉上无法识别。以下是具体修正方案：

步骤1：将BottomBar设为透明背景 #

在BottomBar的Composable中添加透明背景，确保下方的Spacer能正常显示：

@Composable
fun BottomBar(navHostController: NavHostController) {
    BottomNavigation(
        modifier = Modifier.background(Color.Transparent)
    ) {
        // 你的底部导航项实现代码
    }
}

步骤2：调整布局并修正Spacer属性 #

方案一：用Column垂直排列内容与Spacer #

这种布局能让Spacer稳定占据底部56dp高度，避免内容被BottomBar遮挡：

@Composable
fun MainScreen(navHostController: NavHostController) {
    Scaffold(
        bottomBar = { BottomBar(navHostController = navHostController) }
    ) {
        Column(
            modifier = Modifier.fillMaxSize()
        ) {
            SetupNavGraph(navController = navHostController)
            // Spacer占满宽度并固定56dp高度
            Spacer(
                modifier = Modifier
                    .height(56.dp)
                    .fillMaxWidth()
            )
        }
    }
}

方案二：用Box控制层级对齐 #

若偏好Box布局，需确保Spacer对齐底部且占满宽度：

@Composable
fun MainScreen(navHostController: NavHostController) {
    Scaffold(
        bottomBar = { BottomBar(navHostController = navHostController) }
    ) {
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            SetupNavGraph(navController = navHostController)
            Spacer(
                modifier = Modifier
                    .height(56.dp)
                    .fillMaxWidth()
                    .align(Alignment.BottomCenter)
            )
        }
    }
}

关键说明 #

• Scaffold的bottomBar层级高于内容区域，必须设置透明背景才能让下方的Spacer可见
• Spacer必须添加fillMaxWidth()，否则宽度为0，无法在视觉上体现
• 你明确要求用Spacer而非内边距，因此无需使用Scaffold返回的innerPadding

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