open harmony 项目实战自定义底部导航栏的设计与实现底部导航栏是移动 App 的门面之一。普通 Tabs 能用但如果想让应用更有辨识度最好根据项目气质做一点定制。我的“语文视界”项目是一个语文学习 App所以底部导航采用了柔和背景、图标切换、选中星标、阴影悬浮和安全区适配让整体界面更像一个完成度较高的应用。一、导航结构项目底部导航有 6 个入口首页诗词阅读字典学习我的对应代码在Index.etsthis.buildTabItem(0, 首页, $r(app.media.ic_home_normal),$r(app.media.ic_home_selected)); this.buildTabItem(1, 诗词, $r(app.media.ic_poetry_normal),$r(app.media.ic_poetry_selected)); this.buildTabItem(2, 阅读, $r(app.media.ic_reading_normal),$r(app.media.ic_reading_selected)); this.buildTabItem(3, 字典, $r(app.media.ic_dict_normal),$r(app.media.ic_dict_selected)); this.buildTabItem(4, 学习, $r(app.media.ic_learn_normal),$r(app.media.ic_learn_selected)); this.buildTabItem(5, 我的, $r(app.media.ic_my_normal),$r(app.media.ic_my_selected));这种入口设计比较适合学习类应用用户可以很快找到“学、查、读、练、看记录”的位置。二、TabBar 容器设计底部栏不是直接贴在页面底部而是加了底部安全区、背景色和阴影。Column() { Row() {this.buildTabItem(...); } .width(100%) .height(64) } .width(100%) .padding({ bottom:16this.safeAreaBottomVp }) .backgroundColor(this.theme.tabBarBg) .shadow({ radius:20, color:rgba(0, 0, 0, 0.12), offsetY: -5});这里的safeAreaBottomVp来自EntryAbility中对系统避让区的计算。这样在全面屏设备上底部内容不会和手势条重叠。三、单个 Tab 项如何实现单个 Tab 使用Column纵向排列图标和文字Builder buildTabItem(index:number,title:string,iconNormal: Resource,iconSelected: Resource){Column(){Stack({alignContent: Alignment.Center }){Image(this.currentTabIndexindex?iconSelected:iconNormal).width(24) .height(24) .objectFit(ImageFit.Contain);if(this.currentTabIndexindex) {Text(★).fontSize(10).fontColor(this.theme.accentYellow).position({ x:14, y: -4}); } }Text(title).fontSize(11).fontWeight(this.currentTabIndexindex? FontWeight.Bold : FontWeight.Medium).fontColor(this.currentTabIndexindex?this.theme.accentColor:this.theme.textSecondary); } }选中项不仅切换图标还会显示一个小星标。这种细节很适合语文学习 App 的轻松氛围。四、点击切换逻辑点击时调用onTabChange.onClick(() { this.onTabChange(index);});切换逻辑会判断是否正在动画中避免用户连续点击造成状态混乱privateonTabChange(index: number): void {if(this.isTabAnimating || index this.currentTabIndex) {return; }this.isTabAnimating true; }这个判断很小但对体验很有用。五、页面切换动画项目在 Tab 切换时做了淡出、切换内容、淡入的流程animateTo({ duration: ANIM_DURATION.FAST, curve: ANIM_CURVES.STANDARD, onFinish: () {this.currentTabIndex index;constviewMap: string[] [home,poetry_list,reading,dictionary,learn,my];this.currentView viewMap[index] ||home; } }, () {this.tabContentOpacity 0;this.tabContentTranslateY -5; });页面内容区域会绑定透明度和位移.opacity(this.tabContentOpacity) .translate({ y:this.tabContentTranslateY });这样切换 Tab 时不会显得突然。六、什么时候隐藏底部导航不是所有页面都需要底部导航。比如诗词详情页、阅读详情页、默写页、配对页更适合沉浸阅读或练习。项目通过判断currentView控制是否展示底部栏if(this.currentView home||this.currentView poetry_list||this.currentView reading||this.currentView dictionary||this.currentView learn||this.currentView my) {this.TabBarBuilder(); }这个设计可以让一级页面有清晰导航二级页面则减少干扰。七、配图建议这篇文章可以放首页底部导航截图。诗词列表底部导航截图。我的页面底部导航截图。学习中心选中状态截图。截图里可以标注“选中图标”“小星标”“底部安全区”“悬浮阴影”等细节。总结自定义底部导航栏看似是 UI 细节但它直接影响用户对 App 完成度的判断。在这个项目中我通过图标状态、文字高亮、星标装饰、安全区适配和切换动画把一个普通导航栏做成更贴合语文学习 App 气质的组件。对 OpenHarmony 项目来说这是非常值得单独打磨的一块。✨