HarmonyOS鸿蒙Next中桌面卡片背景模糊无法生效

HarmonyOS鸿蒙Next中桌面卡片背景模糊无法生效 在AGC中申请了透明背景，且在form_config.json中配置了enabledBlurBackground、transparencyEnabled,在卡片中也设置了backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)，但模糊背景效果一直无法生效，希望能有相关demo借鉴
测试设备：Pura80 pro+，系统API：23
最好想实现的效果参考如下：
cke_7135.png


更多关于HarmonyOS鸿蒙Next中桌面卡片背景模糊无法生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

尊敬的开发者，您好！
当前卡片支持设置模糊背景，当前的效果不是很明显。为了支持该问题走需求评估流程，需要您补充反馈使用场景和需求不满足可能带来的影响，例如：

原始场景：什么样的业务场景？什么样的交互流程？哪一个过程遇到了问题？

影响：什么时间用到？是否高频？有无三方库可以做到？若提供该能力，是否会造成大工作量返工？
如给您带来不便，敬请谅解。请您注意提供的内容不要包含您或第三方的非公开信息。

更多关于HarmonyOS鸿蒙Next中桌面卡片背景模糊无法生效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


技术支持你好，既然不支持为什么json配置项中有背景模糊这一参数，

开发者您好，当前是支持设置模糊背景的，效果不太明显，如果您想实现类似智慧生活那样模糊背景更加明显的效果，还麻烦您提供一下以上需求信息，感谢您的支持和理解。

个人开发者，喜欢用比较新的属性或者技术来完善自己的APP。并不会有什么实际影响。只是看到文档有说支持背景模糊，但是使用时并无明显效果。

enabledBlurBackground和transparencyEnabled是两个独立的属性。
实现模糊，配置里enabledBlurBackground设为true后，控件上要设置模糊效果。比如：

Stack() {
      Column() {
        
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#80666666') //颜色配置自己的
      .backgroundBlurStyle(BlurStyle.Regular)
      .backdropBlur(20)
      .border({ width: 1, color: 'rgba(255,255,255,0.2)' })//可配可不配
    }
    .height(this.fullHeightPercent)
    .backgroundColor(Color.Transparent)//外层透明

如果找不到原因，再找台设备试试吧

期待HarmonyOS能继续优化多屏协同功能，让跨设备体验更加完美。

桌面卡片里的模糊要先区分“组件自身背景模糊”和“桌面背板透明/模糊”。backgroundBlurStyle 在普通 ArkUI 页面里是组件背景模糊效果，但卡片运行在桌面宿主里，是否能看到桌面背景参与效果，还受卡片背板能力、宿主支持和真机环境影响。

建议先检查几项：1. 透明背板能力是否已在 AGC 申请并审批通过；2. form_config.json 里是否配置了 transparencyEnabled: true，且最终打进的是当前卡片对应的 profile；3. 非透明区域是否满足规范要求，不能做成大面积全透明；4. 用真机桌面加卡验证，预览器不一定能体现该能力；5. 卡片文字颜色建议用 HOST_BG_INVERSE_COLOR_KEY 之类的宿主反色信息适配背景。

如果以上都满足仍无效，再单独确认 enabledBlurBackground/backgroundBlurStyle 在当前 API 和桌面宿主版本是否支持该组合。不要只看卡片页面代码，最终生效点更多在“开放能力 + form_config + 真机宿主”。

这些条件都是满足的，也都是在真机上测试的。透明背板效果是有的，但是模糊像是一直未生效，

设置下高斯模糊呢，不行的话，发一下代码看看

（由于未提供具体的HTML内容，无法进行转换。请提供HTML代码。）

在HarmonyOS Next中，桌面卡片背景模糊不生效通常是因为未正确设置backgroundBlurStyle或blur属性。请确保在卡片布局的根组件（如Stack或Column）上通过.backgroundBlurStyle(BlurStyle.None)或直接设置.blur()并配合backgroundColor使用透明度。若主题或系统版本限制，部分效果可能需在formConfig.json中声明blur能力。检查配置后重新安装卡片即可。

卡片背景模糊不生效，通常是AGC中未开启“透明背景”能力所致。HarmonyOS NEXT API23要求卡片同时满足AGC能力开关与form_config.json配置，缺一不可。

具体操作：

  1. 在AppGallery Connect → 我的应用 → 分发/运营 → 卡片管理，找到对应卡片，开启 “支持透明背景”。
  2. 模块 src/main/module.json 或 form_config.json 中，添加以下配置（位于 abilities -> forms 节点内）：
"transparencyEnabled": true,
"enabledBlurBackground": true
  1. 卡片源码中，根容器直接设置模糊样式，不要添加纯色背景：
@Entry
@Component
struct WidgetCard {
  build() {
    Column() {
      // 内容区域
    }
    .width('100%')
    .height('100%')
    .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)
  }
}

如需半透明着色效果，可在 backgroundBlurStyle 第二个参数中配置 adaptiveColor：

.backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, {
  colorMode: ThemeColorMode.SYSTEM,
  adaptiveColor: AdaptiveColor.DEFAULT
})

注意： 卡片尺寸需要 ≥ 2×2，否则透明模糊无法生效。完成以上步骤后重新部署卡片，即可出现参考图中的毛玻璃效果。

回到顶部