enableEdgeToEdge导航栏无法完全透明问题求助

我使用以下代码设置边缘到边缘显示：

enableEdgeToEdge(
    statusBarStyle = SystemBarStyle.auto(
        Color.TRANSPARENT,
        Color.TRANSPARENT,
    ) { false },
    navigationBarStyle = SystemBarStyle.auto(
        lightScrim,
        darkScrim,
    ) { false },
)

setContent {
    ArchApp()
}

代码参考Android官方Now in Android示例。

日间主题配置：

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">

    <!-- 允许我们在values-night文件夹中覆盖夜间模式特定属性。 -->
    <style name="NightAdjusted.Theme.App" parent="android:Theme.Material.Light.NoActionBar" />

    <!-- 我们使用的最终主题 -->
    <style name="Theme.App" parent="NightAdjusted.Theme.App" />

    <style name="NightAdjusted.Theme.Splash" parent="Theme.SplashScreen">
        <item name="android:windowLightStatusBar" tools:targetApi="23">true</item>
        <item name="android:windowLightNavigationBar" tools:targetApi="27">true</item>
    </style>

    <style name="Theme.App.Splash" parent="NightAdjusted.Theme.Splash">
        <item name="windowSplashScreenAnimatedIcon">@drawable/ic_splash_logo</item>
        <item name="windowSplashScreenBackground">@color/splash_screen_background</item>
        <item name="postSplashScreenTheme">@style/Theme.App</item>
    </style>
</resources>

夜间主题配置：

<style name="NightAdjusted.Theme.App" parent="android:Theme.Material.NoActionBar" />

<style name="NightAdjusted.Theme.Splash" parent="Theme.SplashScreen">
    <item name="android:windowLightStatusBar" tools:targetApi="23">false</item>
    <item name="android:windowLightNavigationBar" tools:targetApi="27">false</item>
</style>

Now in Android应用中的导航栏是完全透明的，效果如下：

问题原因与解决方法 #

你当前代码中navigationBarStyle使用的lightScrim和darkScrim是半透明的系统遮罩色，这就是导航栏无法完全透明的核心原因。要实现和Now in Android一致的完全透明效果，只需将导航栏的样式配置改为和状态栏一致的Color.TRANSPARENT：

enableEdgeToEdge(
    statusBarStyle = SystemBarStyle.auto(
        Color.TRANSPARENT,
        Color.TRANSPARENT,
    ) { false },
    navigationBarStyle = SystemBarStyle.auto(
        Color.TRANSPARENT, // 替换lightScrim
        Color.TRANSPARENT, // 替换darkScrim
    ) { false },
)

setContent {
    ArchApp()
}

额外检查点：

• 确保主题中没有设置android:windowTranslucentNavigation="false"这类冲突属性，避免影响透明效果
• 给Compose页面内容添加Modifier.navigationBarsPadding()，防止内容被导航栏遮挡，保证视觉体验和Now in Android一致

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