HBuilder X更新到4.84之后重新制作uni-app自定义基座底部安全区域变成黑色

HBuilder X更新到4.84之后重新制作uni-app自定义基座底部安全区域变成黑色

操作步骤:

  • 版本更新到4.84之后重新制作自定义基座就变了

预期结果:

  • 底部安全区域颜色跟标准基座相同

实际结果:

  • 底部安全区域变成黑色了

bug描述:

  • 代码没有变更为啥重新打包后 底部安全区域变成黑色了?
  • 图1 是标准基座
  • 图2 是自定义基座

图片

图1 图2

信息表

信息项
产品分类 uniapp/App
PC开发环境 Windows
PC操作系统版本 Windows 11 家庭中文版 23H2
HBuilderX类型 正式
HBuilderX版本 4.85
手机系统 Android
手机系统版本 Android 16
手机厂商 OPPO
手机机型 OPPO Find X8
页面类型 vue
Vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

更多关于HBuilder X更新到4.84之后重新制作uni-app自定义基座底部安全区域变成黑色的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HBuilder X更新到4.84之后重新制作uni-app自定义基座底部安全区域变成黑色的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的HBuilderX 4.84版本更新后引入的问题。在Android平台,自定义基座的底部安全区域默认背景色被错误地设置为黑色,而非跟随页面背景色。

解决方案:

pages.json中配置全局样式,显式设置安全区域背景色:

{
  "globalStyle": {
    "safeArea": {
      "bottom": {
        "offset": "auto",
        "background": "#FFFFFF" // 改为你的页面背景色
      }
    }
  }
}

或者针对特定页面配置:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "safeArea": {
          "bottom": {
            "background": "#FFFFFF"
          }
        }
      }
    }
  ]
}
回到顶部