HarmonyOS 鸿蒙Next中求问官方标题栏的模糊效果怎么实现

HarmonyOS 鸿蒙Next中求问官方标题栏的模糊效果怎么实现 求问官方标题栏的模糊效果怎么实现，API 6.1.0(23)


更多关于HarmonyOS 鸿蒙Next中求问官方标题栏的模糊效果怎么实现的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-hds-component-material

类似这样的吧

更多关于HarmonyOS 鸿蒙Next中求问官方标题栏的模糊效果怎么实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


感谢🙏，

搞定没？，

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

搞定了，就是子页面实现了，主页tab界面还无法实现，不知道是不是设置错误，

学习了

解决了吗，求解答，

解决了，

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

解决了

HDS组件即可实现，有官方api文档，

可以给个链接么，我没找到，

在HarmonyOS Next中，给标题栏容器组件的.blur(radius)属性设置模糊半径（如.blur(10)），同时搭配半透明背景色（如.backgroundColor('#80FFFFFF')）。或使用VisualEffect组件包裹标题栏，调用VisualEffect.blur(10)。若为系统导航栏，可通过windowConfig的blurBehindPolicy属性实现背景模糊。

使用 BackdropBlur 即可实现标题栏的实时模糊毛玻璃效果。在 Stack 中，将标题栏叠放在可滚动内容之上，并对标题栏组件添加 .backdropBlur(模糊半径)，背景内容会透出并模糊。

示例关键代码：

Stack() {
  List() { ... }    // 可滚动内容
  Row() {
    Text('标题')
  }
  .width('100%')
  .height(56)
  .backdropBlur(10)          // 实时模糊背景
  .backgroundColor('rgba(255,255,255,0.4)') // 可选半透明底色
  .position({ x: 0, y: 0 })  // 固定在顶部
}

API 6.1.0(23) 对应 ArkUI 3.x，backdropBlur 完全可用。无需额外权限或模块。

回到顶部