Ionic/Capacitor全屏WebView中Android三键导航栏无法动态适配颜色的问题咨询

问题描述 #

我开发了一个基于Ionic + Capacitor的Android App，采用全屏WebView运行。目前遇到一个导航栏颜色适配的奇怪问题：

• 当设备使用手势导航模式时，系统能自动根据WebView页面的背景色，动态切换导航栏按钮的深浅色（深色背景用浅色按钮，浅色背景用深色按钮，完全正常）
• 但切换到三键导航模式时，这种动态适配完全失效：导航按钮颜色固定不变，不管页面背景是深还是浅。比如深色背景下显示深色按钮（完全看不清），浅色背景下还是深色按钮；偶尔系统会切浅色按钮，结果又在浅色背景上直接“消失”。

我的App页面分为两种：带底部标签栏的深色背景页面，和浅色背景的其他页面，导航栏默认是透明状态（我没有主动修改过透明度配置）。我发现包括Google设置在内的部分App也有类似问题，但还是想找到解决办法。

补充截图对比：

• 三键导航+深色背景：深色按钮（与背景融合，难以识别）
• 三键导航+浅色背景：深色按钮（若系统切换为浅色按钮，则会在浅色背景上完全不可见）
• 手势导航+深色背景：浅色按钮（对比度正常，清晰可见）
• 手势导航+浅色背景：深色按钮（对比度正常，清晰可见）

已尝试的解决方案（均无效） #

1. 使用Capacitor导航栏插件：
   尝试在WebView的PWA中使用@squareetlabs/capacitor-navigation-bar插件切换导航栏透明度，但完全不影响动态颜色适配——插件底层调用windowInsetsController.setAppearanceLightNavigationBars(boolean)，但只有在导航栏非透明时才生效，而且无法根据WebView的页面背景自动切换深浅色。

2. 修改Activity配置：
   在MainActivity.onCreate中针对API 29+设备，尝试开启/关闭导航栏强制对比度：

   if (android.os.Build.VERSION.SDK_INT >= 29) {
       Log.d(TAG, "setting bar contrast");
       getWindow().setNavigationBarContrastEnforced(true); // 或false
   }
   

   但无论设为true还是false，都没有改变三键导航下的动态适配行为。

期望咨询 #

想请教各位：

• 这个问题是普遍存在的，还是我哪里配置有误？
• 有没有办法强制Android在三键导航模式下，重新触发基于WebView页面背景的动态颜色适配？

内容来源于stack exchange