阅读时长约 19 分钟 | 难度★★★★☆ | 篇章第 3 篇 · 首页与功能导航对应源码entry/src/main/ets/common/components/BottomTabBar.ets、HomePage.ets中的BottomNavBarBuilder前言底部导航栏是移动端首页的标配。玄象项目底部导航栏包含首页、探索、我的三个标签通过Builder封装为BottomNavBar并在公共组件层提供独立的BottomTabBar组件。本篇将深入剖析玄象项目底部导航栏的实现从BottomTabBar公共组件设计、Builder复用、State currentIndex选中态切换到 TabItem 接口、点击事件处理、布局属性配置。掌握这套底部导航栏实现方法论您就能为任何 HarmonyOS 应用打造标准化的底部导航。提示玄象项目底部导航栏使用 emoji 图标 文字标签的经典组合通过选中态颜色变化强化交互反馈。一、玄象项目底部导航栏两种实现1.1 HomePage 内的 BottomNavBar BuilderBuilderBottomNavBar(){Row(){this.TabItem(,首页,0)this.TabItem(,探索,1)this.TabItem(,我的,2)}.width(100%).height(60).backgroundColor(Colors.BG_CARD).border({width:{top:1},color:Colors.BG_CARD_BORDER})}BuilderTabItem(icon:string,name:string,index:number){Column({space:4}){Text(icon).fontSize(22).fontColor(indexthis.currentTab?Colors.PRIMARY_GOLD:Colors.TEXT_DIM)Text(name).fontSize(11).fontColor(indexthis.currentTab?Colors.PRIMARY_GOLD:Colors.TEXT_DIM)}.layoutWeight(1).height(56).justifyContent(FlexAlign.Center).onClick((){this.currentTabindex;if(index2){router.pushUrl({url:pages/profile/ProfilePage});}})}1.2 common/components 中的 BottomTabBar 组件Componentexportstruct BottomTabBar{StatecurrentIndex:number0;Statetabs:TabItem[][];privateonTabChange?:(index:number)void;build(){Row(){ForEach(this.tabs,(item:TabItem,index:number){Column({space:4}){Text(item.icon).fontSize(24).fontColor(indexthis.currentIndex?Colors.PRIMARY_GOLD:Colors.TEXT_DIM)Text(item.name).fontSize(11).fontColor(indexthis.currentIndex?Colors.PRIMARY_GOLD:Colors.TEXT_DIM)}.layoutWeight(1).height(56).justifyContent(FlexAlign.Center).onClick((){this.currentIndexindex;if(this.onTabChange){this.onTabChange(index);}})},(item:TabItem)item.name)}.width(100%).height(60).backgroundColor(Colors.BG_CARD).border({width:{top:1},color:Colors.BG_CARD_BORDER})}}二、两种实现的对比2.1 设计差异维度HomePage BottomNavBarcommon BottomTabBar形式BuilderComponentstruct数据硬编码 3 个标签tabs数组动态配置状态currentTabcurrentIndex事件直接 router.pushUrlonTabChange回调复用仅 HomePage全应用2.2 共同点高度 60vp内容区 56vp 上下间距背景色Colors.BG_CARD顶部 1vp 分割线Colors.BG_CARD_BORDER选中态金色Colors.PRIMARY_GOLD未选中态灰色Colors.TEXT_DIM选中态颜色切换逻辑三、TabItem 接口设计3.1 BottomTabBar 中的 TabIteminterfaceTabItem{name:string;icon:string;page:string;}3.2 字段说明字段类型含义namestring标签文字iconstring图标emoji 或字符pagestring跳转页面路由可选3.3 数据驱动设计玄象项目BottomTabBar组件采用数据驱动设计Statetabs:TabItem[][];// 使用方初始化 tabsthis.tabs[{name:首页,icon:,page:pages/HomePage},{name:探索,icon:,page:pages/ExplorePage},{name:我的,icon:,page:pages/profile/ProfilePage}];四、State currentIndex 选中态4.1 状态定义StatecurrentIndex:number0;玄象项目用currentIndex标记当前选中的标签索引。4.2 选中态颜色切换Text(item.icon).fontColor(indexthis.currentIndex?Colors.PRIMARY_GOLD:Colors.TEXT_DIM)Text(item.name).fontColor(indexthis.currentIndex?Colors.PRIMARY_GOLD:Colors.TEXT_DIM)通过三元表达式动态切换颜色选中index currentIndex金色PRIMARY_GOLD未选中灰色TEXT_DIM4.3 点击切换状态.onClick((){this.currentIndexindex;if(this.onTabChange){this.onTabChange(index);}})点击 Tab 时更新currentIndex触发颜色切换。调用onTabChange回调通知外部。五、Builder 复用详解5.1 Builder 参数传递BuilderTabItem(icon:string,name:string,index:number){// ...}Builder支持参数传递玄象项目通过参数复用TabItemBuilder。5.2 Builder 内部访问外部状态BuilderTabItem(icon:string,name:string,index:number){Text(icon).fontColor(indexthis.currentTab?Colors.PRIMARY_GOLD:Colors.TEXT_DIM)// ↑ this.currentTab 访问外层 State}Builder内部可直接访问外层组件的State变量。5.3 Builder vs Component维度BuilderComponent复用范围同组件跨组件状态共享外层独立 State性能略低高适用简单片段复杂组件提示玄象项目首页用Builder实现BottomNavBar是因为导航栏与首页耦合度高。未来若多页面共享导航栏应提取为Component。六、底部导航栏视觉规范6.1 尺寸规范元素尺寸导航栏高度60vp内容区高度56vp图标字号22-24vp标签字号11vp上下间距4vp6.2 颜色规范状态图标颜色文字颜色选中Colors.PRIMARY_GOLDColors.PRIMARY_GOLD未选中Colors.TEXT_DIMColors.TEXT_DIM6.3 布局规范┌──────────────────────────────────┐ │ 分割线 (top: 1) │ ├────────┬────────┬────────┤ │ │ │ │ ← icon │ 首页 │ 探索 │ 我的 │ ← name └────────┴────────┴────────┘七、底部导航栏的扩展7.1 添加徽标Badge({count:5,position:BadgePosition.RightTop}){Text(item.icon).fontSize(24)}7.2 添加中间凸起按钮Row(){this.TabItem(,首页,0)this.TabItem(,探索,1)// 中间凸起按钮Image($r(app.media.add)).width(40).height(40).margin({top:-20})this.TabItem(,我的,2)}7.3 使用 Tabs 组件替代Tabs(){TabContent(){HomePage()}.tabBar(首页)TabContent(){ExplorePage()}.tabBar(探索)TabContent(){ProfilePage()}.tabBar(我的)}八、玄象项目 BottomTabBar 调用示例8.1 在页面中使用 BottomTabBarimport{BottomTabBar}from../common/components/BottomTabBar;EntryComponentstruct HomePage{privatetabs:TabItem[][{name:首页,icon:,page:pages/HomePage},{name:探索,icon:,page:pages/ExplorePage},{name:我的,icon:,page:pages/profile/ProfilePage}];build(){Column(){// 内容区Scroll(){...}// 底部导航栏BottomTabBar({tabs:this.tabs,currentIndex:0,onTabChange:(index:number){router.pushUrl({url:this.tabs[index].page});}})}}}8.2 组件复用价值代码复用所有需要底部导航的页面复用BottomTabBar。视觉一致导航栏样式统一。行为一致选中态切换逻辑一致。九、底部导航栏的交互细节9.1 点击反馈玄象项目当前未实现点击反馈动画。可扩展为StateclickIndex:number-1;Text(item.icon).scale({x:this.clickIndexindex?0.9:1,y:this.clickIndexindex?0.9:1}).animation({duration:100}).onClick((){this.clickIndexindex;setTimeout((){this.clickIndex-1;},100);this.currentIndexindex;})9.2 防止重复点击privatelastClickTime:number0;.onClick((){constnowDate.now();if(now-this.lastClickTime500)return;// 500ms 防抖this.lastClickTimenow;this.currentIndexindex;if(this.onTabChange){this.onTabChange(index);}})十、玄象项目导航体系总结10.1 三层导航层级实现位置页面级导航router.pushUrl/back首页九宫格导航FeatureGridBuilder底部导航栏BottomTabBar组件10.2 导航视觉一致性金色主题Colors.PRIMARY_GOLD深色背景Colors.BG_CARD卡片范式borderborderRadius总结本篇以玄象项目底部导航栏为蓝本深入剖析了 ArkUI 底部导航实现从BottomTabBar公共组件、TabItem接口设计、Builder复用、State currentIndex选中态切换到点击事件处理、视觉规范、扩展方向。掌握这套底部导航栏实现方法论您就能为任何 HarmonyOS 应用打造标准化的底部导航。下一篇《28 · Scroll 容器 layoutWeight 的弹性滚动布局》将带您深入玄象项目首页可滚动区的实现。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源HarmonyOS 官方文档BottomTabBar 设计HarmonyOS 官方文档Tabs 组件HarmonyOS 官方文档Badge 组件开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net