在 HarmonyOS6 中实现 Material Design 3 导航栏

一、什么是 Material Design 3？

Material Design 3（简称 M3）是 Google 的设计系统最新版本。HarmonyOS 有自己的设计语言 HDS，但很多开发者仍然选择 M3 风格来获得跨平台视觉一致性。

M3 的两个核心机制：

• Elevation（层级）：通过阴影深度表达元素的空间层次，阴影越深，元素在视觉上"悬浮"越高；
• Color Roles（色彩角色）：一套完整的色彩命名规范，每个颜色都有明确用途，浅色/深色主题切换只需换一套色值，不用改代码逻辑。

二、Elevation 层级系统

2.1 层级概念

Elevation 用 dp 值表示元素的"悬浮高度"，数值越大阴影越明显：

0dp 无阴影 贴在背景上 1dp 轻微阴影 轻微抬起 2dp 卡片阴影 卡片级别 4dp 导航阴影 导航栏级别（推荐） 8dp 弹窗阴影 对话框级别 16dp 模态阴影 全屏模态级别

2.2 项目中的枚举定义

exportenumMaterialElevation{NONE=0,// 0dp - 无阴影RAISED=1,// 1dp - 轻微抬起CARD=2,// 2dp - 卡片NAVIGATION=4,// 4dp - 导航栏（底部标签栏推荐值）DIALOG=8,// 8dp - 对话框MODAL=16,// 16dp - 模态窗口}

2.3 Elevation 转换为 shadow 参数

HarmonyOS 使用shadow属性实现阴影。在MaterialTabItem组件中，Elevation 数值按以下公式映射到shadow参数：

@Componentstruct MaterialTabItem{@PropisActive:boolean;@Proptab:TabItem;@PropcolorScheme:MaterialColorScheme;@Propelevation:number;// 接收父组件传入的 Elevation 值build(){Column(){// ...图标和文字...}.shadow({// 1dp 约等于 3px 模糊半径radius:this.elevation*3,// Elevation 越高，透明度越低（阴影越深），上限 0.25color:`rgba(0, 0, 0,${Math.min(0.05+this.elevation*0.02,0.25)})`,offsetX:0,offsetY:this.elevation*1.5// 垂直偏移与 Elevation 成正比})}}

代码说明：

• radius: elevation * 3让阴影随层级线性扩大，层级越高阴影越柔和；
• Math.min(0.05 + elevation * 0.02, 0.25)控制阴影透明度，设置上限0.25防止阴影过重；
• offsetY: elevation * 1.5让阴影随层级向下偏移，模拟光线从上方照射的效果。

三、色彩系统

3.1 色彩角色定义

// entry/src/main/ets/types/TabBarTypes.etsexportinterfaceMaterialColorScheme{primary:ResourceColor;// 主色：选中状态背景primaryVariant:ResourceColor;// 主色变体secondary:ResourceColor;// 次要色secondaryVariant:ResourceColor;background:ResourceColor;// 页面背景色surface:ResourceColor;// 卡片/标签栏背景色error:ResourceColor;// 错误色success:ResourceColor;warning:ResourceColor;onPrimary:ResourceColor;// 主色上的文字/图标颜色onSecondary:ResourceColor;onBackground:ResourceColor;// 背景上的文字颜色onSurface:ResourceColor;// 表面色上的文字颜色}

代码说明：以on开头的颜色表示"放在该背景上的前景色"。比如onPrimary是放在primary色背景上的文字颜色，onSurface是放在surface色背景上的文字颜色。这种命名约定让颜色用途一目了然。

3.2 浅色与深色两套配色

exportconstMaterialLightColorScheme:MaterialColorScheme={primary:'#6200EE',// 深紫色作为主色primaryVariant:'#3700B3',secondary:'#03DAC6',secondaryVariant:'#018786',background:'#FAFAFA',surface:'#FFFFFF',error:'#B00020',success:'#4CAF50',warning:'#FF9800',onPrimary:'#FFFFFF',// 深紫背景上用白色文字onSecondary:'#000000',onBackground:'#000000',onSurface:'#000000',};exportconstMaterialDarkColorScheme:MaterialColorScheme={primary:'#BB86FC',// 浅紫色，在深色背景上可读性好primaryVariant:'#3700B3',secondary:'#03DAC6',secondaryVariant:'#03DAC6',background:'#121212',// 深色背景surface:'#1E1E1E',error:'#CF6679',success:'#81C784',warning:'#FFB74D',onPrimary:'#000000',// 浅紫背景上用黑色文字onSecondary:'#000000',onBackground:'#FFFFFF',onSurface:'#FFFFFF',};

代码说明：深色模式下primary从深紫#6200EE换成浅紫#BB86FC，原因是深色模式背景很深，深紫在其上会显得不清晰；onPrimary也相应从白色换为黑色，保证对比度。

3.3 应用到标签栏

// MaterialTabItem 组件中的颜色使用build(){Column(){// 图标颜色：选中时用 onPrimary，未选中时用 onSurfaceSymbolGlyph(this.isActive?this.tab.activeIcon:this.tab.icon).fontSize(24).fontColor(this.isActive?[this.colorScheme.onPrimary]// 选中：主色背景上的文字色:[this.colorScheme.onSurface]// 未选中：表面色上的文字色)// 图标缩放动画：选中时放大 10%.scale({x:this.isActive?1.1:1,y:this.isActive?1.1:1,}).animation({duration:200,curve:Curve.EaseOut})// 标签文字Text(this.tab.title).fontSize(12).fontColor(this.isActive?this.colorScheme.onPrimary:this.colorScheme.onSurface).fontWeight(this.isActive?FontWeight.Medium:FontWeight.Normal).margin({top:4})// 选中指示条：宽度从 0 动画展开到 32Row().width(this.isActive?32:0).height(3).backgroundColor(this.colorScheme.onPrimary).borderRadius(1.5).margin({top:4}).animation({duration:200,curve:Curve.FastOutSlowIn})}.width(64).height(56).backgroundColor(this.isActive?this.colorScheme.primary:Color.Transparent).borderRadius(16)// ...shadow 属性见上文}

代码说明：

• 选中状态下整个Column背景变为primary色，图标和文字颜色切换为onPrimary，形成色彩组合一致的选中效果；
• 指示条宽度从0到32配合.animation()，ArkUI 会自动插值生成展开动画；
• Curve.FastOutSlowIn是 M3 推荐的动画曲线，起步快、收尾慢，符合物理直觉。

四、主题切换

4.1 切换逻辑

@Entry@Componentstruct MaterialTabsDemo{@StateisDarkMode:boolean=false;@StatecolorScheme:MaterialColorScheme=MaterialLightColorScheme;// 点击主题切换按钮时调用privatetoggleTheme(){// 用 animateTo 包裹状态更新，让颜色变化有过渡动画animateTo({duration:300,curve:Curve.EaseInOut},()=>{this.isDarkMode=!this.isDarkMode;this.colorScheme=this.isDarkMode?MaterialDarkColorScheme:MaterialLightColorScheme;});}}

代码说明：整个颜色方案是一个对象引用，切换主题只需把colorScheme指向另一个预设对象，所有依赖它的子组件会自动重新渲染。用animateTo包裹赋值操作，让颜色变化有平滑过渡。

4.2 Elevation 动态调节

本项目提供了一个 Elevation 选择器，可以实时预览不同阴影深度的效果：

// Elevation 选择器 UIForEach([{label:'0',value:MaterialElevation.NONE},{label:'1',value:MaterialElevation.RAISED},{label:'2',value:MaterialElevation.CARD},{label:'4',value:MaterialElevation.NAVIGATION},{label:'8',value:MaterialElevation.DIALOG},],(item:ElevationItem)=>{// ElevationItem 是文件顶部定义的 interfaceText(item.label).fontSize(13).fontWeight(this.elevation===item.value?FontWeight.Medium:FontWeight.Normal).fontColor(this.elevation===item.value?this.colorScheme.primary:this.colorScheme.onSurface).padding({left:8,right:8,top:4,bottom:4}).borderRadius(12).backgroundColor(this.elevation===item.value?this.colorScheme.primary:Color.Transparent).onClick(()=>{animateTo({duration:200},()=>{this.elevation=item.value;});})})

代码说明：

• 这里用到了本地定义的interface ElevationItem，而不是Record<string, number>，原因是 ArkTS 规范禁止在回调函数类型声明处直接使用对象字面量类型，必须先声明为具名接口；
• 每个 Elevation 选项在点击后通过animateTo使阴影变化有动画效果。

五、完整标签栏容器

// 底部 Material 标签栏容器Row(){ForEach(this.tabs,(tab:TabItem,index:number)=>{MaterialTabItem({isActive:this.currentIndex===index,tab:tab,colorScheme:this.colorScheme,elevation:this.elevation}).onClick(()=>{this.switchTab(index);})})}.width('100%').height(64).padding({bottom:8}).backgroundColor(this.colorScheme.surface)// 标签栏背景用 surface 色.justifyContent(FlexAlign.SpaceEvenly).shadow({radius:12,// 深色模式下阴影更深，浅色模式下更轻color:this.isDarkMode?'rgba(0, 0, 0, 0.4)':'rgba(0, 0, 0, 0.08)',offsetX:0,offsetY:-4// 向上偏移，阴影出现在标签栏顶部边缘}).expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.BOTTOM])

代码说明：offsetY: -4让阴影出现在标签栏上方，产生"内容从下方滑入"的层次感；深色模式下阴影透明度从0.08提高到0.4，因为深色背景上浅色阴影几乎不可见。

总结

Material Design 3 的精髓在于"系统性"：颜色不是随手选的，而是有角色分工；阴影不是装饰性的，而是有层级含义。在 HarmonyOS 里把这套规范落地，核心工作就两件事——把 Elevation 映射成shadow参数，把色彩角色映射成一个可以整体切换的配色对象。把这两个部分搭建好之后，浅色/深色主题切换、阴影层级调整都只是换一个变量的事，整个代码结构会变得非常清晰好维护。