uni-app 设置"backgroundColorContent": "transparent",iOS生效但安卓不生效

uni-app 设置"backgroundColorContent": “transparent”,iOS生效但安卓不生效

开发环境信息

项目 详细信息
产品分类 uniapp/App
PC操作系统 Windows
PC版本号 Windows 11
HBuilderX 正式
HBuilderX版本 4.15
手机系统 Android
手机版本号 Android 14
手机厂商 华为
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码:

"style": {
"disableScroll": true,
"navigationStyle": "custom",
"transparentTitle": "always",
"backgroundColorContent": "transparent",
"animationType": "fade-in",
"animationDuration": 200  
}

操作步骤:

uniappx设置"backgroundColorContent": “transparent”,ios生效,安卓不生效

预期结果:

uniappx设置"backgroundColorContent": “transparent”,ios生效,安卓不生效

实际结果:

uniappx设置"backgroundColorContent": “transparent”,ios生效,安卓不生效

bug描述:

uniappx设置"backgroundColorContent": “transparent”,ios生效,安卓不生效


更多关于uni-app 设置"backgroundColorContent": "transparent",iOS生效但安卓不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

因为我不懂原生,所以安卓不支持设置透明的话最好在文档加上提示

更多关于uni-app 设置"backgroundColorContent": "transparent",iOS生效但安卓不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


图片我上传了,你看一下,ios模拟器没问题,华为真机不行


这个问题什么时候能修复?页面背景色设为透明是一个很常见也很重要的需求。我现在项目从uniapp在全面升级uniappX中,安卓要是不支持就很难受啊,有好多功能都依赖这个设置

你是想一个页面透明了,可以看到下面的页面?目前我这儿测试的 android 和 iOS 表现是一致的

对的,ios的没问题,安卓真机就不行

刚新建了项目试了一下,华为mate40 不行

能把你的测试项目给我发一下吗,我在这里试试,我这里就不行

啥原因啊

回复 赵永强: 已确认该问题,已通知相关同事查看

uni-app 中,如果你想设置页面的背景色为透明(transparent),并且已经设置了 "backgroundColorContent": "transparent",但发现只在 iOS 上生效,而在安卓上不生效,可能是因为安卓平台对背景透明的处理方式不同。

解决方法

  1. 检查 manifest.json 配置: 确保在 manifest.json 文件中已经正确配置了 backgroundColortransparent。例如:

    {
      "app-plus": {
        "backgroundColor": "transparent"
      }
    }
    
  2. 设置页面样式: 在页面的样式文件中,手动设置 background-colortransparent。例如:

    page {
      background-color: transparent;
    }
    
  3. 使用 nvue 页面: 如果你使用的是 nvue 页面,可以在 nvue 文件中设置背景色为透明。例如:

    .container {
      background-color: transparent;
    }
    
  4. 检查安卓主题: 在安卓平台上,可能需要检查应用的主题设置。确保在 AndroidManifest.xml 中没有设置不透明的主题。

  5. 使用 uni.setNavigationBarColor: 如果你需要设置导航栏的背景色为透明,可以使用 uni.setNavigationBarColor 方法。例如:

    uni.setNavigationBarColor({
      frontColor: '#ffffff', // 前景颜色
      backgroundColor: 'transparent' // 背景颜色
    });
回到顶部