HarmonyOS鸿蒙Next中服务卡片如何实现毛玻璃效果？

HarmonyOS鸿蒙Next中服务卡片如何实现毛玻璃效果？ 在文档中发现卡片是支持毛玻璃效果的，但未找到相关接口或者实践文档。不知道如何实现该功能。

使用shadow，但卡片实际未生效。blur只有内容模糊不符合需求。

cke_3240.png


更多关于HarmonyOS鸿蒙Next中服务卡片如何实现毛玻璃效果？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

开发者你好，

可参考以下代码实现效果。

@Entry
@Component
struct WidgetCard {
  build() {
    Row() {
      Column({ space: 8 }) {
        Text('title')
          .fontSize(18)
          .fontWeight(FontWeight.Bold);

        Text('subtitle')
          .fontSize(14);
      }
      .width('100%')
      .alignItems(HorizontalAlign.Center);
    }
    .width('100%')
    .padding(20)
    .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, {
      scale: 0.02 // 范围0~1。若阴影边缘过于明显，可以调高；若阴影过于不可见，可以调低。
    })
    .backgroundColor('rgba(255, 255, 255, 0.1)') // 必须有半透明背景色，否则模糊效果不明显
    .border({
      width: 1,
      color: 'rgba(0, 0, 0, 0.2)'
    })
    .borderRadius(20)
    .margin({ bottom: 15 })
    .shadow({
      radius: 20,
      color: Color.White,
      offsetX: 1,
      offsetY: 1
    }); // 添加阴影增强层次感
  }
}

更多关于HarmonyOS鸿蒙Next中服务卡片如何实现毛玻璃效果？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


开发者你好，

从API version 22开始，Form Kit提供卡片背板元素透明显示的能力，满足更丰富的UI设计以及美观诉求。参考背板透明卡片开发指导。 申请透明卡片权限后，参考实现毛玻璃效果。

根据给的案例是这样的效果。

cke_169.png

这样的参数是怎么设置的，如何实现？

cke_2405.png

可参考4楼的回复实现目标效果。

类似这种效果

cke_262.png

我记得好像AGC后台，api管理里面，毛玻璃效果是要申请的，

在HarmonyOS Next中，服务卡片实现毛玻璃效果主要通过@ohos.window模块的setWindowBackgroundBlur接口。首先获取当前窗口，然后调用此接口并传入模糊半径等参数即可为窗口背景添加模糊效果。该效果作用于窗口层级，因此卡片内容本身需保持透明或半透明以透出底层模糊背景。具体实现涉及窗口管理能力，需在卡片配置文件中声明相应权限。

在HarmonyOS Next中，服务卡片实现毛玻璃效果（背景模糊）的核心方法是使用 blur 样式，并确保其作用于正确的层级。

根据您提供的代码片段和描述，blur 只模糊了内容，这通常是因为模糊效果被应用在了卡片内部组件上，而非卡片的背景层。要实现卡片背景的毛玻璃效果，关键在于将 blur 效果应用到卡片的根节点或背景层。

以下是实现步骤和代码示例：

  1. 在卡片的根组件（通常是Column、Row或Stack）上设置blur样式。 这是最直接的方法。通过为整个卡片的容器添加模糊，可以使其背后的内容（如桌面壁纸或其他应用界面）产生模糊效果。

    @Entry
@Component
struct WidgetCard {
  build() {
    // 在根节点Stack上应用blur样式
    Stack() {
      // 卡片的具体内容...
      Text('Hello World')
        .fontSize(20)
        .fontColor(Color.White)
    }
    .width('100%')
    .height('100%')
    // 关键：为卡片背景添加毛玻璃效果
    .backdropBlur(10) // 数值越大，模糊程度越高
    .backgroundBlurStyle(BlurStyle.Thin) // 设置模糊样式，Thin是较细的材质效果
    .backgroundColor(Color.White) // 可以叠加一个半透明白色背景，增强“玻璃”质感
    .opacity(0.9)
  }
}

  2. 使用backgroundBlurStyle与backdropBlur配合。 backgroundBlurStyle 用于定义模糊的视觉风格（如材质厚度），backdropBlur 控制模糊半径。两者结合能获得更符合设计系统的毛玻璃质感。

  3. 关于shadow和您遇到的未生效问题： shadow 属性用于添加阴影，与背景模糊效果无关。如果之前尝试shadow未生效，请检查样式是否应用正确，例如：

    .shadow({ radius: 10, color: Color.Gray, offsetX: 0, offsetY: 2 })

    但请注意，阴影并不能实现毛玻璃（背景模糊）效果。

总结： 要实现服务卡片的毛玻璃效果，请将 .backdropBlur() 和可选的 .backgroundBlurStyle() 样式应用于卡片的根布局组件。确保不要将其仅用于内部文本或图片组件，否则模糊的将是卡片自身的内容，而非卡片背后的背景。通过调整模糊半径和叠加半透明背景色，可以控制效果的强弱和视觉风格。

回到顶部