鸿蒙系统在uni-app中APP主题是暗黑的话底部会有白边

鸿蒙系统在uni-app中APP主题是暗黑的话底部会有白边

信息类别 详情
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 15.4.1
HBuilderX类型 正式
HBuilderX版本号 4.76
手机系统 Android
手机系统版本号 Android 16
手机厂商 华为
手机机型 harmonyos 5.1.0.15
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

/* manifest.json */  
"app-plus" : {  
     "darkmode" : true,  
 }

App.vue

page {
  background: #020508;
}

预期结果：

希望能去掉鸿蒙默认底部白边的问题

实际结果：

目前暗黑主题的app在鸿蒙系统下存在底部白边问题，并且没有解决方案

bug描述：

背景色要配置为黑色，只要不是白色都能看到这个底部白边问题，而且目前即使配置了manifest.json也无法得到解决，希望官方可以解决一下 manifest.json配置

"app-harmony" : {
  "safearea" : {
    "background" : "black",
    "backgroundDark" : "black", // HX 3.1.19+支持
    "bottom" : {
      "offset" : "none" // 在没有 tabBar 时，底部区域是否需要占位
    }
  }
},

鸿蒙开发白边的说明 https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-previewer-operating-6

Image

相关链接：


更多关于鸿蒙系统在uni-app中APP主题是暗黑的话底部会有白边的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

完整的manifest.json配置 { “app-harmony”: { “safearea”: { “background”: “black”, “backgroundDark”: “black”, “bottom”: { “offset”: “none” } } }, “app-plus”: { “darkmode”: true, “themeLocation”: “theme.json”, “safearea”: { “background”: “black”, “backgroundDark”: “black”, “bottom”: { “offset”: “none” } }, “vueVersion”: “3” } }

更多关于鸿蒙系统在uni-app中APP主题是暗黑的话底部会有白边的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


还不支持 darkmode，关注一下下一版 HBuilderX 发布，或者参考这个 ask 中我的回复中的附件

好的谢谢

这是一个在鸿蒙系统上常见的适配问题，主要是由于系统安全区域（Safe Area）处理机制导致的。

从你提供的配置来看，已经正确设置了app-harmony下的safearea背景色为黑色，但底部仍然出现白边。这通常是因为鸿蒙系统的底部安全区域默认会保留一定的空白区域。

建议尝试以下解决方案：

  1. 检查页面级安全区域配置： 在具体页面的style中添加：
page {
  background: #020508;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
  1. 在App.vue中强制覆盖安全区域样式：
/* #ifdef APP-HARMONY */
page {
  padding-bottom: constant(safe-area-inset-bottom) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}
/* #endif */
  1. 检查是否有tabBar： 如果有tabBar，确保在pages.json中正确配置了tabBar的背景色：
"tabBar": {
  "backgroundColor": "#020508",
  "borderStyle": "black"
}
回到顶部