ionicwang 1楼

api23的HdsTabs组件，加了一个悬浮属性

更多关于HarmonyOS鸿蒙Next中导航条这种光影效果是怎么做出来的的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

songsunli 2楼

文档链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-hds-component-material

访问不了的话就是没权限

h691938207 3楼

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html，

eggper 4楼

文档有，应该是对部分账号开放（）

sinazl 5楼

原文档：沉浸光感-UI Design Kit（UI设计套件）

沉浸光感

场景介绍

从6.1.0(23) 版本开始，新增支持HDS组件的沉浸光感材质能力。

HDS导航：通过设置TitleBarStyleOptions的systemMaterialEffect参数，可为标题栏按钮设置沉浸光感视效。
HDS底部页签：通过设置HdsTabsFloatingStyle的systemMaterialEffect参数，可为底部页签设置沉浸光感视效。

使用系统自适应的沉浸光感

推荐使用系统自适应的沉浸光感效果，系统会根据当前设备的算力动态调整组件的材质效果，实现性能与显示效果的最佳平衡体验。

开发步骤

导入相关模块。

import { HdsNavigation, HdsNavigationTitleMode, HdsTabs, HdsTabsController, HdsNavigationMenuContentOptions, ScrollEffectType, hdsMaterial, } from '@kit.UIDesignKit';
import { SymbolGlyphModifier } from "@kit.ArkUI";

创建HDS导航和底部页签组件。导航标题栏包含1个返回按钮和3个功能按钮，底部页签包含3个子项。

以下示例代码为底部页签和标题栏的4个按钮设置了沉浸光感效果，根据设备所能支持的材质能力自定义动态切换显示效果。

 @Entry
 @Component
 export struct Index {
   private scrollerForScroll: Scroller = new Scroller();
   private controller: HdsTabsController = new HdsTabsController();

   private menus: HdsNavigationMenuContentOptions = {
     value: [{
       content: {
         label: 'menu1',
         icon: $r('sys.symbol.square_and_pencil'),
       }
     }, {
       content: {
         label: 'menu2',
         icon: $r('sys.symbol.star')
       },
     },{
       content: {
         label: 'menu3',
         icon: $r('sys.symbol.more')
       },
     }
     ],
   };

   build() {
     HdsNavigation() {
       HdsTabs({ controller: this.controller }) {
         ForEach(MENU_CONFIG, (item: MenuItem) => {
           TabContent() {
             Stack() {
               Scroll(this.scrollerForScroll) {
                 Column() {
                   Image($r("app.media.scenery01")).width('100%') // scenery为自定义资源，开发者需替换本地资源
                 }
               }
               .clipContent(ContentClipMode.SAFE_AREA)
               .height('100%')
             }
           }
           .tabBar(new BottomTabBarStyle({
             normal: item.symbolGlyph, selected: item.symbolGlyph1
           }, item.label))
         })
       }
       .barOverlap(true)
       .vertical(false)
       .barPosition(BarPosition.End)
       .barFloatingStyle({
         barBottomMargin: 28,
         systemMaterialEffect:  {
           materialType: hdsMaterial.MaterialType.ADAPTIVE,
           materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE // 底部悬浮页签沉浸光感效果跟随系统策略自适应
         }
       })
     }
     .mode(NavigationMode.Stack)
     .titleBar({
       content: {
         title: {
           mainTitle: 'MainTitle',
         },
         menu: this.menus,
       },
       style: {
         scrollEffectOpts: {
           enableScrollEffect: false,
           scrollEffectType: ScrollEffectType.GRADIENT_BLUR,
         },
         systemMaterialEffect: {
           materialType: hdsMaterial.MaterialType.ADAPTIVE,
           materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE // 标题栏按钮沉浸光感效果跟随系统策略自适应
         },
       },
       avoidLayoutSafeArea: false,
       enableComponentSafeArea: false
     })
     .bindToScrollable([this.scrollerForScroll])
     .hideBackButton(false)
     .titleMode(HdsNavigationTitleMode.MINI)
     .ignoreLayoutSafeArea([LayoutSafeAreaType.SYSTEM], [LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM])
   }
 }

 interface MenuItem {
   symbolGlyph: SymbolGlyphModifier,
   symbolGlyph1: SymbolGlyphModifier,
   label: string,
   defaultBgColor: ResourceColor,
   hoverBgColor: ResourceColor,
   pressBgColor: ResourceColor,
 };

 const MENU_CONFIG: MenuItem[] = [
   {
     symbolGlyph: new SymbolGlyphModifier($r('sys.symbol.alarm_fill_1')).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
       .fontColor([$r('sys.color.ohos_id_color_bottom_tab_icon_off'),
         $r('sys.color.ohos_id_color_bottom_tab_icon_auxcolor_off02')]),
     symbolGlyph1: new SymbolGlyphModifier($r('sys.symbol.alarm_fill_1')).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
       .fontColor([$r('sys.color.ohos_id_color_activated'), $r('sys.color.ohos_id_color_primary_contrary')]),
     label: '闹钟',
     defaultBgColor: Color.Transparent,
     hoverBgColor: $r('sys.color.ohos_id_color_hover'),
     pressBgColor: $r('sys.color.ohos_id_color_click_effect')
   },
   {
     symbolGlyph: new SymbolGlyphModifier($r('sys.symbol.worldclock_fill_2')).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
       .fontColor([$r('sys.color.ohos_id_color_bottom_tab_icon_off'),
         $r('sys.color.ohos_id_color_bottom_tab_icon_auxcolor_off02')]),
     symbolGlyph1: new SymbolGlyphModifier($r('sys.symbol.worldclock_fill_2')).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
       .fontColor([$r('sys.color.ohos_id_color_activated'), $r('sys.color.ohos_id_color_primary_contrary')]),
     label: '时钟',
     defaultBgColor: Color.Transparent,
     hoverBgColor: $r('sys.color.ohos_id_color_hover'),
     pressBgColor: $r('sys.color.ohos_id_color_click_effect')
   },
   {
     symbolGlyph: new SymbolGlyphModifier($r('sys.symbol.stopwatch_2')).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
       .fontColor([$r('sys.color.ohos_id_color_bottom_tab_icon_off'),
         $r('sys.color.ohos_id_color_bottom_tab_icon_auxcolor_off02')]),
     symbolGlyph1: new SymbolGlyphModifier($r('sys.symbol.stopwatch_2')).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
       .fontColor([$r('sys.color.ohos_id_color_activated'), $r('sys.color.ohos_id_color_primary_contrary')]),
     label: '秒表',
     defaultBgColor: Color.Transparent,
     hoverBgColor: $r('sys.color.ohos_id_color_hover'),
     pressBgColor: $r('sys.color.ohos_id_color_click_effect')
   }
 ];

使用自定义沉浸光感效果

如果使用自定义沉浸光感的视觉效果，请先调用getSystemMaterialTypes()接口查询当前设备所支持的材质能力，再根据查询结果选用相应的材质效果枚举：

如果查询结果显示当前设备支持IMMERSIVE材质类型，可选用EXQUISITE或GENTLE效果。
如果查询结果显示当前设备不支持IMMERSIVE材质类型，则建议使用SMOOTH效果，以降低卡顿和发热风险，保障用户体验。

开发步骤

导入相关模块。

import { HdsNavigation, HdsNavigationTitleMode, HdsTabs, HdsTabsController, HdsNavigationMenuContentOptions, ScrollEffectType, hdsMaterial, } from '@kit.UIDesignKit';
import { SymbolGlyphModifier } from "@kit.ArkUI";

创建HDS导航和底部页签组件。导航标题栏包含1个返回按钮和3个功能按钮，底部页签包含3个子项。

以下示例代码为底部页签和标题栏的4个按钮设置了沉浸光感效果，根据设备所能支持的材质能力自定义动态切换显示效果。

 @Entry
 @Component
 export struct Index {
   private scrollerForScroll: Scroller = new Scroller();
   private controller: HdsTabsController = new HdsTabsController();
   @State customMaterialLevel: hdsMaterial.MaterialLevel = hdsMaterial.MaterialLevel.EXQUISITE;

   private menus: HdsNavigationMenuContentOptions = {
     value: [{
       content: {
         label: 'menu1',
         icon: $r('sys.symbol.square_and_pencil'),
       }
     }, {
       content: {
         label: 'menu2',
         icon: $r('sys.symbol.star')
       },
     },{
       content: {
         label: 'menu3',
         icon: $r('sys.symbol.more')
       },
     }
     ],
   };

   aboutToAppear(): void {
     let materialTypes: Array<hdsMaterial.MaterialType> = hdsMaterial.getSystemMaterialTypes();
     if (materialTypes.indexOf(hdsMaterial.MaterialType.IMMERSIVE) < 0) {
       this.customMaterialLevel = hdsMaterial.MaterialLevel.SMOOTH; // 当前设备不支持IMMERSIVE材质类型，则使用SMOOTH效果
     }
   }

   build() {
     HdsNavigation() {
       HdsTabs({ controller: this.controller }) {
         ForEach(MENU_CONFIG, (item: MenuItem) => {
           TabContent() {
             Stack() {
               Scroll(this.scrollerForScroll) {
                 Column() {
                   Image($r("app.media.scenery01")).width('100%') // scenery为自定义资源，开发者需替换本地资源
                 }
               }
               .clipContent(ContentClipMode.SAFE_AREA)
               .height('100%')
             }
           }
           .tabBar(new BottomTabBarStyle({
             normal: item.symbolGlyph, selected: item.symbolGlyph1
           }, item.label))
         })
       }
       .barOverlap(true)
       .vertical(false)
       .barPosition(BarPosition.End)
       .barFloatingStyle({
         barBottomMargin: 28,
         systemMaterialEffect:  {
           materialType: hdsMaterial.MaterialType.ADAPTIVE,
           materialLevel: this.customMaterialLevel // 底部悬浮页签自定义沉浸光感材质效果
         }
       })
     }
     .mode(NavigationMode.Stack)
     .titleBar({
       content: {
         title: {
           mainTitle: 'MainTitle',
         },
         menu: this.menus,
       },
       style: {
         scrollEffectOpts: {
           enableScrollEffect: false,
           scrollEffectType: ScrollEffectType.GRADIENT_BLUR,
         },
         systemMaterialEffect: {
           materialType: hdsMaterial.MaterialType.ADAPTIVE,
           materialLevel: this.customMaterialLevel // 标题栏按钮自定义沉浸光感材质效果
         },
       },
       avoidLayoutSafeArea: false,
       enableComponentSafeArea: false
     })
     .bindToScrollable([this.scrollerForScroll])
     .hideBackButton(false)
     .titleMode(HdsNavigationTitleMode.MINI)
     .ignoreLayoutSafeArea([LayoutSafeAreaType.SYSTEM], [LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM])
   }
 }

 interface MenuItem {
   symbolGlyph: SymbolGlyphModifier,
   symbolGlyph1: SymbolGlyphModifier,
   label: string,
   defaultBgColor: ResourceColor,
   hoverBgColor: ResourceColor,
   pressBgColor: ResourceColor,
 };

 const MENU_CONFIG: MenuItem[] = [
   {
     symbolGlyph: new SymbolGlyphModifier($r('sys.symbol.alarm_fill_1')).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
       .fontColor([$r('sys.color.ohos_id_color_bottom_tab_icon_off'),
         $r('sys.color.ohos_id_color_bottom_tab_icon_auxcolor_off02')]),
     symbolGlyph1: new SymbolGlyphModifier($r('sys.symbol.alarm_fill_1')).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
       .fontColor([$r('sys.color.ohos_id_color_activated'), $r('sys.color.ohos_id_color_primary_contrary')]),
     label: '闹钟',
     defaultBgColor: Color.Transparent,
     hoverBgColor: $r('sys.color.ohos_id_color_hover'),
     pressBgColor: $r('sys.color.ohos_id_color_click_effect')
   },
   {
     symbolGlyph: new SymbolGlyphModifier($r('sys.symbol.worldclock_fill_2')).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
       .fontColor([$r('sys.color.ohos_id_color_bottom_tab_icon_off'),
         $r('sys.color.ohos_id_color_bottom_tab_icon_auxcolor_off02')]),
     symbolGlyph1: new SymbolGlyphModifier($r('sys.symbol.worldclock_fill_2')).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
       .fontColor([$r('sys.color.ohos_id_color_activated'), $r('sys.color.ohos_id_color_primary_contrary')]),
     label: '时钟',
     defaultBgColor: Color.Transparent,
     hoverBgColor: $r('sys.color.ohos_id_color_hover'),
     pressBgColor: $r('sys.color.ohos_id_color_click_effect')
   },
   {
     symbolGlyph: new SymbolGlyphModifier($r('sys.symbol.stopwatch_2')).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
       .fontColor([$r('sys.color.ohos_id_color_bottom_tab_icon_off'),
         $r('sys.color.ohos_id_color_bottom_tab_icon_auxcolor_off02')]),
     symbolGlyph1: new SymbolGlyphModifier($r('sys.symbol.stopwatch_2')).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
       .fontColor([$r('sys.color.ohos_id_color_activated'), $r('sys.color.ohos_id_color_primary_contrary')]),
     label: '秒表',
     defaultBgColor: Color.Transparent,
     hoverBgColor: $r('sys.color.ohos_id_color_hover'),
     pressBgColor: $r('sys.color.ohos_id_color_click_effect')
   }
 ];

沉浸光感材质效果展示

wuwangju 6楼

噢噢，感谢！，

wuwangju 7楼

很有C考价值🤓，

h691938207 8楼

C语言大师

eggper 9楼

不错, 希望更多开发者用上

vueper 10楼

不错，

phonegap100 11楼作者

HarmonyOS的分布式技术让我实现了跨设备的无缝协作，工作效率翻倍。

itying888 12楼

好帖子，值得收藏。

gougou168 13楼

好酷owo

nodeper 14楼

刚适配完，效果真的炫。

yuanlaile 15楼

不错，

vueper 16楼

😀，

yuanlaile 17楼

这个组件我都适配完了，说实话还挺好用😄，建议更多人考虑适配，

gougou168 18楼

在HarmonyOS鸿蒙Next中，导航条的光影效果可通过ArkUI框架实现。主要方式包括：使用.shadow()属性设置阴影，或通过.linearGradient等渐变背景模拟光晕；也可利用Canvas组件自定义绘制光影层。结合@State动态更新参数即可呈现流动光影。

ionicwang 19楼

鸿蒙Next中导航条的光影流动效果通常通过Tabs组件自定义指示器或Navigation组件结合背景模糊与滑动动画实现。非单独组件，而是利用ArkUI的属性动画与渐变背景。

核心思路：

使用 Tabs 的 barMode: BarMode.Scrollable，自定义 indicator，给选中项添加半透明渐变光晕，配合 transition 或 animateTo 监听 currentIndex 变化，让光晕平滑移动。
或采用 Navigation 的底部 TabBar，在选中图标上叠加 BlendMode 与 linearGradient 实现光影透叠。
光效背后常结合 backdropBlur 模糊底板，使导航条有毛玻璃衬底。

若你是看设计规范，最新设计指南中底部导航选中状态会伴随微动效光晕扩散，可用 @State 控制光斑位置和渐变色相，配合 onChange 事件驱动光条位移。无需额外组件，纯动画能力即可实现。