往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

设置动态模糊样式

场景介绍

Hds导航组件扩展支持标题栏动态模糊样式。当应用开发者需要使用标题栏样式随内容区滚动而动态改变样式的导航组件时，可以通过设置titleBar属性中的标题栏样式配置，自定义滚动前后的标题栏样式。

开发步骤

1. 导入相关模块。

   import { HdsNavigation, HdsNavigationAttribute, ScrollEffectType } from '@kit.UIDesignKit';
   import { LengthMetrics } from '@kit.ArkUI';

2. 创建Hds一级导航组件，通过配置titleBar中的style属性，设置标题栏动态模糊样式。

   import { HdsNavigation, HdsNavigationAttribute, ScrollEffectType } from '@kit.UIDesignKit';
   import { LengthMetrics } from '@kit.ArkUI';
   @Entry
   @Component
   struct Index {
     build() {
       HdsNavigation() {  // 创建HdsNavigation组件
         // HdsNavigation组件内容区
       }.titleBar({
         style: {// 设置Hds导航组件标题栏样式
           // 标题栏动态模糊样式，包括是否使能滚动动态模糊，动态模糊类型，动态模糊生效的滚动距离等
           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', subTitle: 'SubTitle' },
         }
       })
     }
   }

​