Compose启用Edge to Edge后底部栏被系统导航栏遮挡问题求助

你的自定义BottomBar被系统导航按钮遮挡，核心原因是**enableEdgeToEdge()会让应用布局延伸到系统导航栏的下方区域**，而当前的BottomBar没有添加对应的内边距避开导航栏。

具体修改方案 #

给BottomBar添加导航栏内边距即可解决，有两种简单实现方式：

方式1：直接给BottomBar的Modifier添加内边距

修改你的BottomBar组件，在它的Modifier里加上navigationBarsPadding()：

@Composable
fun BottomBar(navController: NavController) {
    BottomNavigation(
        modifier = Modifier.navigationBarsPadding() // 添加这一行
    ) {
        // 你的底部导航项代码
    }
}

方式2：在Scaffold的bottomBar参数里包裹内边距

如果不想修改BottomBar组件本身，可以在Scaffold中给BottomBar套一层带内边距的容器：

Scaffold(
    bottomBar = {
        Box(modifier = Modifier.navigationBarsPadding()) {
            BottomBar(navController = navController)
        }
    }
) { padding ->
    // 原有内容区域代码
}

额外说明 #

你在Scaffold的content里用的Modifier.padding(it)，这个it是Scaffold提供的内容区域内边距（包含状态栏、顶部栏、底部栏的间距），但它只作用于content区域，不会自动应用到bottomBar参数传入的组件上，因此必须单独给BottomBar处理导航栏的内边距。

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