Jetpack Compose中NavigationBar阴影不显示问题求助

核心原因 #

你混淆了Material3中tonalElevation和elevation的作用：

• tonalElevation仅用于调整NavigationBar容器的色调深浅，不会生成阴影；
• 控制阴影显示的是elevation参数，这才是生成顶部阴影的关键。

解决步骤 #

1. 添加elevation参数 #

直接在NavigationBar中设置elevation属性，值设为你需要的阴影高度（比如8.dp）：

@Composable
fun BottomNavigationBar(viewModel: BottomNavViewModel = hiltViewModel(), navController: NavHostController) {
    NavigationBar(
        elevation = 8.dp, // 关键：控制阴影的参数
        tonalElevation = 8.dp, // 可选，仅调整容器色调
        containerColor = ..., // 你的容器颜色（已验证非透明，无需修改）
        contentColor = Color.LightGray
    ) {
        CustomBottomNav(
            navController = navController,
            viewModel = viewModel,
            modifier = Modifier.navigationBarsPadding()
        )
    }
}

2. 检查主题配置（可选） #

如果设置elevation后仍无阴影，需确认主题未禁用阴影：
确保你的Material3主题中没有强制关闭阴影效果，默认配置下阴影是启用的，无需额外修改，若有自定义主题可检查：

MaterialTheme(
    colorScheme = yourColorScheme,
    typography = yourTypography,
    shapes = yourShapes
    // 默认启用阴影，无需额外配置
) {
    // 应用内容
}

3. 避免内容遮挡阴影 #

检查MainNavHost的根布局是否设置了不透明背景，若有会遮挡NavigationBar的顶部阴影。可将背景改为半透明，或确保内容区域与bottomBar之间的间距足够（Scaffold的innerPadding已处理此问题，大概率无需调整）。

效果验证 #

修改后重新运行，NavigationBar顶部应会显示预期的阴影效果。

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