如何移除Jetpack Compose中应用切换器底部的黑条

这个问题的核心是系统导航栏区域在应用切换器中的背景色未与BottomBar同步，默认显示为黑色。以下是具体解决步骤：

1. 同步系统导航栏与BottomBar的颜色 #

直接将系统导航栏的颜色设置为BottomBar的颜色，可在Activity或Compose主题中配置：

在Activity中设置： #

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 设置导航栏颜色为BottomBar的目标颜色
    window.navigationBarColor = ContextCompat.getColor(this, R.color.bottom_bar_color)
    // Android 12+可选：关闭导航栏强制对比度，避免系统自动调整颜色
    window.isNavigationBarContrastEnforced = false
    
    setContent {
        // 你的Compose页面内容
    }
}

在Compose主题中设置： #

MaterialTheme(
    colorScheme = ColorScheme(
        // 其他颜色配置...
        navigationBarColor = BottomBarColor // 替换为你的BottomBar颜色
    )
) {
    // 你的布局内容
}

2. 让Scaffold正确适配导航栏Insets #

使用Compose的WindowInsets确保BottomBar与系统导航栏对齐，同时避免主内容被遮挡：

Scaffold(
    bottomBar = {
        BottomAppBar(
            modifier = Modifier.windowInsetsPadding(WindowInsets.navigationBars),
            containerColor = BottomBarColor
        ) {
            // BottomBar的具体内容（如导航按钮）
        }
    },
    // 让主内容区域自动适配导航栏Insets
    contentWindowInsets = WindowInsets.navigationBars
) { innerPadding ->
    // 主内容通过innerPadding避免被BottomBar遮挡
    Box(modifier = Modifier.padding(innerPadding)) {
        // 你的页面主体内容
    }
}

完成以上设置后，应用切换器底部的黑条会被替换为BottomBar的颜色，实现视觉统一。

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