Jetpack Compose透明底部导航栏出现深色背景块如何解决

问题原因 #

你设置了BottomNavigation容器的背景为透明，但BottomNavigationItem组件默认自带选中状态的背景填充效果，你看到的深色块就是子项的默认选中背景。

修复步骤 #

1. 给BottomNavigationItem添加背景透明配置
   该组件的background参数是接收选中状态返回对应背景的Lambda，直接固定返回透明色即可覆盖默认配置：

background = { Color.Transparent }

2. （可选）移除点击/选中时的波纹效果
   如果不需要默认的点按波纹反馈，额外添加以下两个参数：

interactionSource = remember { MutableInteractionSource() },
indication = null

完整修改后的代码片段 #

@Composable
fun BottomNavigationBar(items: List<BottomNavItem>, navController: NavController, onItemClick: (BottomNavItem) -> Unit){
    val selectedScreen = navController.currentBackStackEntryAsState()
    BottomNavigation(
        modifier = Modifier.fillMaxWidth(),
        backgroundColor = Color.Transparent,
    ) {
        items.forEach { item ->
            val selected = item.route == selectedScreen.value?.destination?.route
            BottomNavigationItem(
                selected = selected,
                onClick = { onItemClick(item) },
                selectedContentColor = colorResource(id = R.color.button_background_light_blue),
                unselectedContentColor = Color.Gray,
                // 新增配置开始
                background = { Color.Transparent },
                interactionSource = remember { MutableInteractionSource() },
                indication = null,
                // 新增配置结束
                icon = {
                    Column(horizontalAlignment = CenterHorizontally) {
                        Icon(imageVector = item.icon, contentDescription = item.name)
                        if(selected) {
                            Text(text = item.name, textAlign = TextAlign.Center, fontSize = 10.sp)
                        }
                    }
                }
            )
        }
    }
}

异常校验 #

如果修改后仍存在深色背景，检查承载BottomNavigationBar的上层容器（如Scaffold）的背景配置，将上层容器对应区域的背景也设置为透明即可。

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