HarmonyOS鸿蒙Next中应用顶部高斯模糊是怎么实现的

HarmonyOS鸿蒙Next中应用顶部高斯模糊是怎么实现的 想要图一的效果，我写的要么是图二有模糊但是在中间，要么没模糊在顶上



更多关于HarmonyOS鸿蒙Next中应用顶部高斯模糊是怎么实现的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

上代码：

// 从6.0.2(22)版本开始，无需手动导入HdsNavigationAttribute。具体请参考HdsNavigation的导入模块说明。
import { HdsNavigation, HdsNavigationTitleMode, ScrollEffectType, HdsNavigationAttribute } from '@kit.UIDesignKit';
import { LengthMetrics } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
  build() {
    HdsNavigation() { // 创建HdsNavigation组件
      List({ space: 12, initialIndex: 0, scroller: this.scroller }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Column() {
              Row({ space: 8 }) {
                Button() {
                  SymbolGlyph($r('sys.symbol.wifi'))
                    .fontColor([$r('sys.color.icon_on_primary')])
                    .fontSize(24)
                }
                .width(35)
                .height(35)
                Text('list_' + item)
                .width('100%')
                .height(72)
                .fontSize(16)
                .fontWeight(500)
              }
              Divider().margin({ left: 40 })
            }
          }
          .height(56)
        }, (item: number) => item.toString())
      }
      .margin({ left: 16, right: 16 })
      .clip(false) // 设置不对子组件超出当前组件范围外的区域进行裁剪，使内容区可以穿透到标题栏下方
      .cachedCount(3, true) // 设置列表中ListItem/ListItemGroup的预加载数量，列表穿透到标题栏下方不会消失
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true })
    }
    .titleBar({
      enableComponentSafeArea: true, // 将标题栏设置为组件级安全区，内容区可避让标题栏
      style: { // 设置导航组件标题栏样式，推荐使用默认样式
        // 标题栏动态模糊样式，包括是否使能滚动动态模糊，动态模糊类型，动态模糊生效的滚动距离等
        scrollEffectOpts: {
          enableScrollEffect: true,
          scrollEffectType: ScrollEffectType.COMMON_BLUR,
          blurEffectiveStartOffset: LengthMetrics.vp(0),
          blurEffectiveEndOffset: LengthMetrics.vp(20)
        },
        originalStyle: { // 内容区滚动前初始样式设置
          backgroundStyle: { // 标题栏背板样式设置
            backgroundColor: $r('sys.color.ohos_id_color_background'),
          },
          contentStyle: { // 标题栏内容区样式设置，包括标题区域，菜单区域，返回按钮区域
            titleStyle: {
              mainTitleColor: $r('sys.color.font_primary'),
              subTitleColor: $r('sys.color.font_secondary')
            },
            menuStyle: {
              backgroundColor: $r('sys.color.comp_background_tertiary'),
              iconColor: $r('sys.color.icon_primary')
            },
            backIconStyle: {
              backgroundColor: $r('sys.color.comp_background_tertiary'),
              iconColor: $r('sys.color.icon_primary')
            }
          }
        },
        scrollEffectStyle: { // 内容区滚动超过blurEffectiveEndOffset后样式设置
          backgroundStyle: {
            backgroundColor: $r('sys.color.ohos_id_color_background_transparent')
          },
          contentStyle: {
            titleStyle: {
              mainTitleColor: $r('sys.color.font_primary'),
              subTitleColor: $r('sys.color.font_secondary')
            },
            menuStyle: {
              backgroundColor: $r('sys.color.comp_background_tertiary'),
              iconColor: $r('sys.color.icon_primary')
            },
            backIconStyle: {
              backgroundColor: $r('sys.color.comp_background_tertiary'),
              iconColor: $r('sys.color.icon_primary')
            }
          }
        }
      },
      content: { // 标题栏内容设置
        title: { mainTitle: 'MainTitle' },
      }
    })
    .hideBackButton(true)
    .bindToScrollable([this.scroller]) // 绑定导航组件和可滚动容器组件
    .titleMode(HdsNavigationTitleMode.MINI)
  }
}

效果图：

cke_4638.png

渐变模糊样式

模糊效果在空间维度上呈现逐渐增强/减弱的变化，模糊边界柔和，用于增强页面沉浸感。

更多关于HarmonyOS鸿蒙Next中应用顶部高斯模糊是怎么实现的的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


大佬牛逼，

顶部模糊如果总是跑到中间，通常是模糊层放在了内容布局里，而不是放在导航/顶部覆盖层里。系统应用那种效果更推荐走 HdsNavigation 的动态模糊能力，而不是自己在 Column 中随便叠 blur。

建议两种方式：

  1. 使用 HdsNavigation 的 titleBar scrollEffectOpts，按场景选择 GRADIENT_BLUR 或过渡模糊，并通过 bindToScrollable 绑定滚动容器。
  2. 如果自己实现，外层用 Stack，内容 Scroll 放底层，顶部固定一个高度明确的遮罩层放上层，position/align 到 top，并关闭它对内容布局的占位影响。

还要注意：

  1. 顶部模糊层需要覆盖在图片/列表上方，不能作为 Scroll 的普通子组件参与滚动。
  2. 要处理状态栏安全区，否则看起来会从标题栏下方才开始模糊。
  3. 如果是 HDS 场景，优先用官方材质和动态模糊，性能和深浅色适配会更稳。

简单说，想要图一那种效果，关键不是“blur 数值调大”，而是模糊层的层级、位置和滚动容器绑定要对。

感谢大佬，

开发者您好，从5.1.0(18)版本开始，导航组件新增支持标题栏通用模糊（适用于列表型非沉浸式场景）样式。从6.0.0(20)版本开始，新增支持过渡模糊（适用于沉浸式图文类）与渐变模糊（适用于增强页面沉浸感的场景）样式。

参考文档：设置动态模糊样式

感谢大佬，

在 HarmonyOS Next 中，顶部高斯模糊通过 ArkTS 的 blur() 方法或 VisualEffect 实现。通常使用 Stack 布局，在顶部放置一层半透明背景，并对背景组件调用 .blur(radius) 设置模糊半径。也可通过 Canvas 的 drawBlur 绘制模糊区域。无需引入 Java 或 C。

鸿蒙Next中顶部高斯模糊可通过backdropBlur组件实现，它会对下层内容进行模糊处理。核心是将需要模糊的背景放在Stack底层，顶部叠加一个仅覆盖顶部的backdropBlur容器。

示例关键代码：

Stack() {
  // 底层：实际内容
  Column() { /* 页面内容 */ }

  // 顶层：顶部模糊遮罩
  Column()
    .width('100%')
    .height(80) // 模糊区域高度
    .backdropBlur(10) // 模糊半径
    .position({ x: 0, y: 0 }) // 固定在顶部
}

要点：

  • 使用position固定到顶部，避免模糊区域受布局影响跑到中间。
  • backdropBlur仅对下层内容生效，自身透明则显示模糊效果；若要半透明底色可叠加backgroundColor。
  • 若模糊出现在中间，检查是否未设置绝对定位或容器高度未覆盖顶部。
回到顶部