如何通过Jetpack Compose消除原生导航栏的淡分隔线？

我正在尝试消除屏幕底部原生导航按钮与应用内容之间的淡分隔线。当前我的应用中，导航按钮与底部导航栏之间存在一条非常淡的分隔线，不确定这是Elevation（阴影）效果还是其他原因。我希望实现类似Android Slack应用的效果：导航栏区域颜色完全一致。

目前我已将应用底部导航栏设置为白色，并使用accompanist库将系统导航栏设置为白色，代码如下：

BottomNavigation(
        modifier = Modifier
            .background(Color.White),
        backgroundColor = Color.White,
        elevation = 0.dp,
    )

...

    val systemUiController = rememberSystemUiController()
    SideEffect {
        systemUiController.setSystemBarsColor(
            color = Color.White,
        )
    }

请问还需要进行哪些操作？

解决方法 #

• 关闭导航栏对比度强制（Android 12+）：这条淡分隔线多数是Android 12及以上版本的系统导航栏对比度增强机制导致的。在调用setSystemBarsColor时添加navigationBarContrastEnforced = false参数，强制关闭该效果，让导航栏颜色完全与设置值一致：

SideEffect {
    systemUiController.setSystemBarsColor(
        color = Color.White,
        darkIcons = false, // 根据实际图标需求调整，白色背景下一般用深色图标
        navigationBarContrastEnforced = false
    )
}

• 确保布局与系统导航栏无缝衔接：检查底部导航栏的WindowInsets配置，让布局正确适配系统导航栏区域，避免出现间隙或视觉分割。给BottomNavigation添加Insets相关处理：

BottomNavigation(
    modifier = Modifier
        .background(Color.White)
        .windowInsetsPadding(WindowInsets.navigationBar), // 让布局适配导航栏Insets
    backgroundColor = Color.White,
    elevation = 0.dp,
)

• 检查主题配置：如果上述操作无效，检查应用主题是否设置了导航栏分割线颜色。在传统XML主题中，将android:navigationBarDividerColor设为@android:color/transparent；若使用Compose主题，确认ColorScheme中没有配置会导致分割线的相关颜色。

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