带圆角底部导航栏设置透明背景及内容不遮挡问题

要实现带圆角的透明底部导航栏，同时保留内容内边距避免遮挡，只需修改两个关键配置：

1. 给NavigationBar设置透明背景 #

NavigationBar组件默认会使用Material主题的surface颜色作为背景，这就是你看到白色背景的原因。显式将其backgroundColor设为Color.Transparent即可移除默认背景：

修改后的BottomBar代码：

fun BottomBar(navController: NavHostController) {
    val currentDestination = navController.currentDestination
    NavigationBar(
        modifier = Modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(50.dp, 25.dp, 0.dp, 0.dp)),
        backgroundColor = Color.Transparent // 核心：设置导航栏背景透明
    ) {
        screens.forEach { screen ->
            AddItem(
                screen = screen,
                currentDestination = currentDestination,
                navController = navController
            )
        }
    }
}

2. 保留Scaffold的内边距设置 #

你的Scaffold代码已经正确通过paddingValues为内容预留了底部空间，继续保持当前配置即可：

Scaffold(
    containerColor = Color.Transparent,
    bottomBar = { BottomBar(navController = navController) }
) { paddingValues -> 
    Column(
        modifier = Modifier.padding(paddingValues)
    ) {
        HomeNavGraph(navController = navController, mainViewModel)
    }
}

额外优化提示 #

如果导航栏的图标或文字在透明背景下可读性不足，可以通过NavigationBar的contentColor参数调整颜色，例如：

NavigationBar(
    // ...其他参数
    contentColor = MaterialTheme.colorScheme.onSurface
)

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