HarmonyOS 鸿蒙Next背景模糊

HarmonyOS 鸿蒙Next背景模糊

如何实现按背景颜色不变的情况下实现模糊效果就是这个图片的一样

图片


更多关于HarmonyOS 鸿蒙Next背景模糊的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

下拉通知栏，通知栏高斯模糊那种？

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


就是搜索框和状态栏总和高度的模糊效果，

状态栏没有Api能做到，搜索框的话倒是可以借助组件的blur属性能实现https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-effectkit#blur

自定义Header区域的背景颜色保留原来的颜色值的情况下实现相似图片的Header区域的玻璃效果，

在HarmonyOS鸿蒙Next中实现背景模糊，可以使用系统提供的毛玻璃效果组件。主要涉及Window和WindowManager模块，通过设置窗口的模糊参数实现。关键API包括：

  1. Window.setBackgroundBlurRadius() - 设置背景模糊半径
  2. WindowManager.LayoutParams配置BLUR_MODE参数
  3. 可结合Opacity属性调整透明度

示例代码：

import window from '@ohos.window';

let windowClass = window.get(this.context).then((win) => {
  win.setBackgroundBlur(10); // 设置10px模糊半径
});

模糊效果仅适用于系统应用，需声明ohos.permission.SYSTEM_FLOAT_WINDOW权限。

在HarmonyOS Next中实现背景模糊效果可以通过BackdropBlur组件实现。以下是核心实现方案：

  1. 使用BackdropBlur组件的基本代码结构：
BackdropBlur({
  blurStyle: BlurStyle.Thick,  // 模糊程度
  child: yourContentComponent // 需要显示在前景的内容
})
.backgroundImage($r('app.media.background')) // 设置背景图
.backgroundImageSize(ImageSize.Cover)
  1. 关键参数说明：
  • blurStyle：支持4种预设模糊程度
    • BlurStyle.Thin(轻微)
    • BlurStyle.Regular(常规)
    • BlurStyle.Thick(重度)
    • BlurStyle.Background(背景级)
  1. 保持背景色不变的技巧：
BackdropBlur({
  blurStyle: BlurStyle.Thick
})
.backgroundColor(Color.White) // 叠加背景色
.opacity(0.8) // 调整透明度
  1. 性能优化建议：
  • 对静态背景使用Image组件缓存
  • 动态内容建议设置clip属性限制模糊区域
  • 避免在滚动视图中过度使用

注意：实际效果需要通过真机调试，模拟器可能无法准确呈现模糊效果。

回到顶部