HarmonyOS鸿蒙Next中如何实现毛玻璃（模糊）效果？

HarmonyOS鸿蒙Next中如何实现毛玻璃（模糊）效果？ 背景图片需添加毛玻璃效果，提升UI层次感。

4 回复 
Column () {

}
.backgroundColor('rgba(153, 153, 153, 0.50)')
.backdropBlur(50)

cke_406.png

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


通过Image组件的blur方法实现，opacity示例代码：

/**
 * @author J.query
 * @date 2025/12/23 09:07
 * @email j-query@foxmail.com
 * Description:
 */

@Entry
@Component
struct BlurEffect {
  build() {
    Stack() {
      // 背景图片
      Image('网络图片地址')
        .width('100%')
        .height('100%')
      // 毛玻璃层
      Image('网络图片地址')
        .width('100%')
        .height('100%')
        .blur(20) // 模糊半径20
        .opacity(0.8)
      // 内容区域
      Column() {
        Text('毛玻璃效果')
          .fontSize(20)
          .fontColor(Color.White)
      }
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
  }
}

cke_4921.png

效果：背景图片呈现模糊效果，文字清晰可读。

在HarmonyOS Next中实现毛玻璃效果，可以使用EffectComponent组件并设置blur样式。具体步骤：

  1. 导入@ohos.graphics.effectComponent模块。
  2. 在UI中创建EffectComponent。
  3. 设置blurStyle属性，通过radius参数调整模糊半径。

示例代码：

import { EffectComponent } from '@ohos.graphics.effectComponent';

// 在build函数中
EffectComponent()
  .blurStyle({ radius: 10 })
  .backgroundBlurStyle(BlurStyle.THIN)

通过调整模糊半径和背景模糊样式控制毛玻璃强度。

在HarmonyOS Next中，可以通过filter属性或BackdropBlur组件实现毛玻璃（背景模糊）效果，这是提升UI视觉层次感的常用方法。

1. 使用组件的filter属性（推荐） 这是最直接的方式，适用于任何组件（如Image、Column等）。通过设置filter为Blur，并指定模糊半径即可。

// 示例：对背景图片应用毛玻璃效果
Image($r('app.media.background'))
  .width('100%')
  .height('100%')
  .filter(ImageFilter.Blur(10)) // 数值越大越模糊
  .overlay(
    // 在此叠加前景内容，形成层次感
    Text("主要内容")
      .fontSize(30)
      .fontColor(Color.White)
  )

2. 使用BackdropBlur组件 该组件专门用于对其后方内容进行背景模糊，通常与Stack布局结合，能更精细地控制模糊区域。

// 示例：局部毛玻璃效果
Stack({ alignContent: Alignment.Top }) {
  // 底层背景
  Image($r('app.media.background'))
    .width('100%')
    .height('100%')

  // 中层：模糊层，仅模糊该区域下方的背景
  BackdropBlur({
    blurRadius: 10, // 模糊半径
    iterations: 3   // 迭代次数，影响性能与质量，通常1-3即可
  })
    .width('80%')
    .height('30%')
    .backgroundColor('#66FFFFFF') // 可叠加半透明底色增强效果

  // 顶层：前景内容
  Text("悬浮卡片")
    .fontSize(20)
}

关键参数说明：

  • 模糊半径 (blurRadius)：决定模糊程度，单位vp，通常5-15效果较佳。
  • 迭代次数 (iterations)：影响模糊质量与性能，默认值为1，增加可提升平滑度但耗能增加。

注意事项：

  • 毛玻璃效果有性能开销，避免大面积或动态使用。
  • 在模糊层上叠加半透明颜色（如#40FFFFFF）可增强玻璃质感。
  • 不同设备模糊效果可能存在细微差异。

根据你的UI结构选择合适方案，filter属性适合全屏背景模糊，BackdropBlur则适合卡片、导航栏等局部设计。

回到顶部