uni-app android设备 底部安全区域背景色设置问题

uni-app android设备 底部安全区域背景色设置问题

操作步骤：

  • 使用测试手机打开任何APP界面，都会出现白色安全区域

预期结果：

  • 底部安全区域背景色为：#373b53

实际结果：

  • 底部安全区域背景色为：#ffffff,肉眼观看是白色

bug描述：

android 设备 小米 MI 9 SE MIUI 12.5.1手机 ，底部安全区域设置背景色无效,始终成白色

9 回复

同问

更多关于uni-app android设备 底部安全区域背景色设置问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


同问

同问

您可以暂时使用这种方式来修改Android的底部安全区颜色

安卓小米手机 使用 var Color = plus.android.importClass(“android.graphics.Color”); plus.android.importClass(“android.view.Window”); var mainActivity = plus.android.runtimeMainActivity(); var window_android = mainActivity.getWindow(); window_android.setNavigationBarColor(Color.GREEN);

方案修改底部区域颜色后 APP出现很多怪异问题…(NVUE项目)

回复 3***@qq.com: 具体什么问题？

回复 DCloud_Android_THB: 会阻塞navigateTo跳转

针对您提到的Android设备底部安全区域背景色设置问题，这通常是由于系统导航栏（安全区域）样式未正确配置导致的。以下为解决方案：

  1. 检查manifest.json配置：
    在uni-app项目的manifest.json中，确保已正确设置Android导航栏样式。例如：

    "app-plus": {
  "statusbar": {
    "immersed": true
  },
  "safearea": {
    "bottom": {
      "offset": "auto",
      "background": "#373b53"
    }
  }
}

    其中background字段应设置为目标颜色#373b53。

  2. 使用CSS变量动态适配：
    在页面的CSS中，通过env(safe-area-inset-bottom)适配安全区域高度，并设置背景色：

    .safe-area {
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #373b53;
}

    将页面底部元素（如选项卡）包裹在该类中。

  3. Android系统兼容性处理：
    MIUI等定制系统可能覆盖全局样式，建议在页面onLoad时通过原生API动态设置：

    // 仅Android端生效
#ifdef APP-PLUS
if (plus.os.name.toLowerCase() === 'android') {
  plus.navigator.setStatusBarBackground('#373b53');
}
#endif

  4. 检查样式覆盖问题：
    确认项目中没有全局CSS（如App.vue）强制修改了背景色。可尝试在页面样式添加!important测试：

    body {
  background-color: #373b53 !important;
}
回到顶部