前言欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net底部导航栏是移动应用的核心交互组件让用户在不同的主页面间快速切换。小分享 App 的 BottomTabBar 采用自定义组件方案包含 5 个 Tab 和一个中间凸起的 按钮。本篇全面拆解其实现涵盖Component 组件封装、Prop 参数传递、凸起按钮设计、Tab 切换路由等关键知识点。详细 API 可参考 HarmonyOS Row 组件官方文档。一、BottomTabBar 完整代码1.1 组件定义小分享 App 的 BottomTabBar 组件定义在components/BottomTabBar.ets中完整的实现代码如下import router from ohos.router; import { TabItem } from ../common/interfaces; Preview Component export struct BottomTabBar { Prop currentIndex: number 0; private tabItems: ArrayTabItem [ { icon: , label: 首页 }, { icon: , label: 发现 }, { icon: ➕, label: }, { icon: ⭐, label: 收藏 }, { icon: , label: 我的 } ]; build() { Row() { ForEach(this.tabItems, (item: TabItem, index: number) { if (index 2) { // 中间 按钮凸起设计 Column() { Text() .fontSize(28) .fontColor(Color.White) .fontWeight(FontWeight.Bold) } .width(52).height(52) .backgroundColor(#F5A623) .borderRadius(26) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .margin({ top: -16 }) .shadow({ radius: 8, color: #40F5A623, offsetY: 4 }) .onClick(() { router.pushUrl({ url: pages/CreateSelectPage }) }) } else { // 普通 Tab 项 Column({ space: 2 }) { Text(item.icon).fontSize(22) Text(item.label) .fontSize(10) .fontColor(index this.currentIndex ? #F5A623 : #999999) } .layoutWeight(1) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .onClick(() { this.onTabClick(index) }) } }, (item: TabItem, index: number) ${item.label}_${index}) } .width(100%).height(56) .backgroundColor(Color.White) .shadow({ radius: 4, color: #10000000, offsetY: -2 }) } private onTabClick(index: number): void { const pages: string[] [pages/HomePage, pages/DiscoverPage, , pages/FavoritesPage, pages/ProfilePage]; const targetPage pages[index]; if (targetPage) { router.replaceUrl({ url: targetPage }) } } }1.2 TabItem 接口定义TabItem 接口定义在common/interfaces.ets中作为底部导航栏的数据模型export interface TabItem { icon: string; // 图标 Emoji label: string; // 标签文字 }二、五种 Tab 设计与布局2.1 Tab 列表BottomTabBar 包含 5 个 Tab每个 Tab 对应一个主页面索引图标标签跳转页面渲染方式0首页pages/HomePage普通 Tab1发现pages/DiscoverPage普通 Tab2➕(空)pages/CreateSelectPage凸起按钮3⭐收藏pages/FavoritesPage普通 Tab4我的pages/ProfilePage普通 Tab2.2 ForEach 循环渲染使用ForEach循环渲染 5 个 Tab通过index判断是否为中间按钮ForEach(this.tabItems, (item: TabItem, index: number) { if (index 2) { // 渲染凸起 按钮 } else { // 渲染普通 Tab 项 } }, (item: TabItem, index: number) ${item.label}_${index})2.3 代码块示例条件渲染// 条件渲染的两种模式 if (index 2) { // 模式 A凸起 按钮 this.renderCenterButton() } else { // 模式 B普通 Tab this.renderNormalTab(index) }三、中间凸起按钮实现3.1 凸起核心代码中间 按钮是 BottomTabBar 的视觉焦点代码如下Column() { Text() .fontSize(28) .fontColor(Color.White) .fontWeight(FontWeight.Bold) } .width(52).height(52) .backgroundColor(#F5A623) .borderRadius(26) .margin({ top: -16 }) .shadow({ radius: 8, color: #40F5A623, offsetY: 4 })3.2 凸起原理margin({ top: -16 })让按钮向上偏移 16vp超出底部导航栏范围BottomTabBar 高度 56vp ┌─────────────┐ │ 52×52 │ ← margin({top: -16}) 上移 16vp │ ┌─────┐ │ Home │ │ │ │ Favorites │ └─────┘ │ └─────────────┘3.3 阴影效果凸起按钮的阴影效果通过shadow属性实现.shadow({ radius: 8, // 阴影半径 8vp color: #40F5A623, // 半透明主色阴影 offsetY: 4 // 向下偏移 4vp })提示shadow属性的color使用十六进制 ARGB 格式前两位是透明度alpha#40表示 25% 不透明度。四、Prop currentIndex 控制高亮4.1 高亮逻辑Tab 的高亮态通过Prop currentIndex控制当index currentIndex时文字变为主色Text(item.label) .fontSize(10) .fontColor(index this.currentIndex ? #F5A623 : #999999)4.2 高亮状态对比状态条件文字颜色视觉效果选中index currentIndex#F5A623(橙色)突出显示未选中index ! currentIndex#999999(灰色)正常显示4.3 Prop 装饰器Prop用于父组件向子组件传递数据实现单向数据流// 父组件HomePage State currentTab: number 0 BottomTabBar({ currentIndex: this.currentTab }) // 子组件BottomTabBar Prop currentIndex: number 0五、Tab 切换路由策略5.1 onTabClick 方法Tab 切换时调用onTabClick方法使用replaceUrl避免路由栈膨胀private onTabClick(index: number): void { const pages: string[] [ pages/HomePage, pages/DiscoverPage, , pages/FavoritesPage, pages/ProfilePage ] const targetPage pages[index] if (targetPage) { router.replaceUrl({ url: targetPage }) } }5.2 路由 API 对比Tab 切换使用replaceUrl而非pushUrl原因如下API特性适用场景router.replaceUrl替换当前页栈不变Tab 切换、启动页跳转router.pushUrl新页入栈可返回列表→详情、编辑→预览router.back()出栈返回返回上一页5.3 代码块示例路由栈保护// 当路由栈深度超过 30 时清空 if (router.getLength() 30) { router.clear() router.replaceUrl({ url: pages/HomePage }) }六、底部阴影设计6.1 阴影配置底部导航栏的阴影让它看起来浮在内容之上.shadow({ radius: 4, color: #10000000, offsetY: -2 // 负值使阴影向上 })提示offsetY: -2让阴影向上偏移产生“浮起“的视觉效果。七、组件引用与复用7.1 在页面中引用在首页中使用 BottomTabBar 组件import { BottomTabBar } from ../components/BottomTabBar; Entry Component struct HomePage { build() { Column() { // 内容区域 Scroll() { /* ... */ } .layoutWeight(1) // 底部导航栏 BottomTabBar({ currentIndex: 0 }) } .width(100%).height(100%) .backgroundColor(#F5F5F5) } }7.2 Preview 装饰器Preview装饰器允许在 DevEco Studio 中预览组件效果无需编译运行Preview Component export struct BottomTabBar { // ... }八、扩展思考8.1 更多自定义样式// 自定义 Tab 字体大小 .fontSize(10fp) // 自定义选中态颜色 .fontColor(#F5A623) // 自定义背景色变化 .backgroundColor(this.currentIndex index ? #FFF3E0 : Color.White)8.2 与 Tabs 组件对比HarmonyOS 也提供了原生的 Tabs 组件对比自定义方案对比维度自定义 BottomTabBarTabs 组件灵活性完全自定义固定样式凸起按钮支持不支持开发成本较高较低动画需手动实现内置九、常见问题9.1 问题 1Tab 点击无反应原因onTabClick方法中pages数组索引越界或targetPage为空字符串。解决确保pages数组长度与 Tab 数量一致空字符串跳过。9.2 问题 2凸起按钮位置偏移原因margin({ top: -16 })与其他布局属性冲突。解决确保凸起按钮的父容器没有设置overflow: hidden。十、核心知识点10.1 技术要点使用Component和Prop封装可复用的底部导航组件ForEach循环渲染 条件判断实现不同 Tab 样式margin({ top: -16 })实现凸起按钮效果router.replaceUrl避免 Tab 切换时路由栈膨胀10.2 实战建议中间凸起按钮的margin({top: -16})值需根据导航栏高度调整Tab 切换时用replaceUrl而非pushUrl避免栈溢出所有 Tab 页面路径集中管理在pages数组中总结本文详细拆解了小分享 App BottomTabBar 自定义底部导航栏组件的完整实现从Tab 布局、凸起按钮、Prop 高亮、路由切换到组件复用涵盖了底部导航栏的全部核心知识点。下一篇我们将深入State与Prop状态管理讲解 Tab 高亮联动的实现原理。附录完整代码索引本文涉及的所有代码片段均来自小分享 App 的以下文件文件路径说明components/BottomTabBar.ets底部导航栏组件common/interfaces.etsTabItem 接口定义pages/HomePage.ets首页使用 BottomTabBarpages/DiscoverPage.ets发现页使用 BottomTabBarpages/FavoritesPage.ets收藏页使用 BottomTabBarpages/ProfilePage.ets个人中心使用 BottomTabBar以上代码均可在小分享 App 工程中查看完整实现。第一步了解组件的基本用法第二步掌握组件的核心属性如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力
HarmonyOS开发实战：小分享-BottomTabBar自定义底部导航栏组件
前言欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net底部导航栏是移动应用的核心交互组件让用户在不同的主页面间快速切换。小分享 App 的 BottomTabBar 采用自定义组件方案包含 5 个 Tab 和一个中间凸起的 按钮。本篇全面拆解其实现涵盖Component 组件封装、Prop 参数传递、凸起按钮设计、Tab 切换路由等关键知识点。详细 API 可参考 HarmonyOS Row 组件官方文档。一、BottomTabBar 完整代码1.1 组件定义小分享 App 的 BottomTabBar 组件定义在components/BottomTabBar.ets中完整的实现代码如下import router from ohos.router; import { TabItem } from ../common/interfaces; Preview Component export struct BottomTabBar { Prop currentIndex: number 0; private tabItems: ArrayTabItem [ { icon: , label: 首页 }, { icon: , label: 发现 }, { icon: ➕, label: }, { icon: ⭐, label: 收藏 }, { icon: , label: 我的 } ]; build() { Row() { ForEach(this.tabItems, (item: TabItem, index: number) { if (index 2) { // 中间 按钮凸起设计 Column() { Text() .fontSize(28) .fontColor(Color.White) .fontWeight(FontWeight.Bold) } .width(52).height(52) .backgroundColor(#F5A623) .borderRadius(26) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .margin({ top: -16 }) .shadow({ radius: 8, color: #40F5A623, offsetY: 4 }) .onClick(() { router.pushUrl({ url: pages/CreateSelectPage }) }) } else { // 普通 Tab 项 Column({ space: 2 }) { Text(item.icon).fontSize(22) Text(item.label) .fontSize(10) .fontColor(index this.currentIndex ? #F5A623 : #999999) } .layoutWeight(1) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .onClick(() { this.onTabClick(index) }) } }, (item: TabItem, index: number) ${item.label}_${index}) } .width(100%).height(56) .backgroundColor(Color.White) .shadow({ radius: 4, color: #10000000, offsetY: -2 }) } private onTabClick(index: number): void { const pages: string[] [pages/HomePage, pages/DiscoverPage, , pages/FavoritesPage, pages/ProfilePage]; const targetPage pages[index]; if (targetPage) { router.replaceUrl({ url: targetPage }) } } }1.2 TabItem 接口定义TabItem 接口定义在common/interfaces.ets中作为底部导航栏的数据模型export interface TabItem { icon: string; // 图标 Emoji label: string; // 标签文字 }二、五种 Tab 设计与布局2.1 Tab 列表BottomTabBar 包含 5 个 Tab每个 Tab 对应一个主页面索引图标标签跳转页面渲染方式0首页pages/HomePage普通 Tab1发现pages/DiscoverPage普通 Tab2➕(空)pages/CreateSelectPage凸起按钮3⭐收藏pages/FavoritesPage普通 Tab4我的pages/ProfilePage普通 Tab2.2 ForEach 循环渲染使用ForEach循环渲染 5 个 Tab通过index判断是否为中间按钮ForEach(this.tabItems, (item: TabItem, index: number) { if (index 2) { // 渲染凸起 按钮 } else { // 渲染普通 Tab 项 } }, (item: TabItem, index: number) ${item.label}_${index})2.3 代码块示例条件渲染// 条件渲染的两种模式 if (index 2) { // 模式 A凸起 按钮 this.renderCenterButton() } else { // 模式 B普通 Tab this.renderNormalTab(index) }三、中间凸起按钮实现3.1 凸起核心代码中间 按钮是 BottomTabBar 的视觉焦点代码如下Column() { Text() .fontSize(28) .fontColor(Color.White) .fontWeight(FontWeight.Bold) } .width(52).height(52) .backgroundColor(#F5A623) .borderRadius(26) .margin({ top: -16 }) .shadow({ radius: 8, color: #40F5A623, offsetY: 4 })3.2 凸起原理margin({ top: -16 })让按钮向上偏移 16vp超出底部导航栏范围BottomTabBar 高度 56vp ┌─────────────┐ │ 52×52 │ ← margin({top: -16}) 上移 16vp │ ┌─────┐ │ Home │ │ │ │ Favorites │ └─────┘ │ └─────────────┘3.3 阴影效果凸起按钮的阴影效果通过shadow属性实现.shadow({ radius: 8, // 阴影半径 8vp color: #40F5A623, // 半透明主色阴影 offsetY: 4 // 向下偏移 4vp })提示shadow属性的color使用十六进制 ARGB 格式前两位是透明度alpha#40表示 25% 不透明度。四、Prop currentIndex 控制高亮4.1 高亮逻辑Tab 的高亮态通过Prop currentIndex控制当index currentIndex时文字变为主色Text(item.label) .fontSize(10) .fontColor(index this.currentIndex ? #F5A623 : #999999)4.2 高亮状态对比状态条件文字颜色视觉效果选中index currentIndex#F5A623(橙色)突出显示未选中index ! currentIndex#999999(灰色)正常显示4.3 Prop 装饰器Prop用于父组件向子组件传递数据实现单向数据流// 父组件HomePage State currentTab: number 0 BottomTabBar({ currentIndex: this.currentTab }) // 子组件BottomTabBar Prop currentIndex: number 0五、Tab 切换路由策略5.1 onTabClick 方法Tab 切换时调用onTabClick方法使用replaceUrl避免路由栈膨胀private onTabClick(index: number): void { const pages: string[] [ pages/HomePage, pages/DiscoverPage, , pages/FavoritesPage, pages/ProfilePage ] const targetPage pages[index] if (targetPage) { router.replaceUrl({ url: targetPage }) } }5.2 路由 API 对比Tab 切换使用replaceUrl而非pushUrl原因如下API特性适用场景router.replaceUrl替换当前页栈不变Tab 切换、启动页跳转router.pushUrl新页入栈可返回列表→详情、编辑→预览router.back()出栈返回返回上一页5.3 代码块示例路由栈保护// 当路由栈深度超过 30 时清空 if (router.getLength() 30) { router.clear() router.replaceUrl({ url: pages/HomePage }) }六、底部阴影设计6.1 阴影配置底部导航栏的阴影让它看起来浮在内容之上.shadow({ radius: 4, color: #10000000, offsetY: -2 // 负值使阴影向上 })提示offsetY: -2让阴影向上偏移产生“浮起“的视觉效果。七、组件引用与复用7.1 在页面中引用在首页中使用 BottomTabBar 组件import { BottomTabBar } from ../components/BottomTabBar; Entry Component struct HomePage { build() { Column() { // 内容区域 Scroll() { /* ... */ } .layoutWeight(1) // 底部导航栏 BottomTabBar({ currentIndex: 0 }) } .width(100%).height(100%) .backgroundColor(#F5F5F5) } }7.2 Preview 装饰器Preview装饰器允许在 DevEco Studio 中预览组件效果无需编译运行Preview Component export struct BottomTabBar { // ... }八、扩展思考8.1 更多自定义样式// 自定义 Tab 字体大小 .fontSize(10fp) // 自定义选中态颜色 .fontColor(#F5A623) // 自定义背景色变化 .backgroundColor(this.currentIndex index ? #FFF3E0 : Color.White)8.2 与 Tabs 组件对比HarmonyOS 也提供了原生的 Tabs 组件对比自定义方案对比维度自定义 BottomTabBarTabs 组件灵活性完全自定义固定样式凸起按钮支持不支持开发成本较高较低动画需手动实现内置九、常见问题9.1 问题 1Tab 点击无反应原因onTabClick方法中pages数组索引越界或targetPage为空字符串。解决确保pages数组长度与 Tab 数量一致空字符串跳过。9.2 问题 2凸起按钮位置偏移原因margin({ top: -16 })与其他布局属性冲突。解决确保凸起按钮的父容器没有设置overflow: hidden。十、核心知识点10.1 技术要点使用Component和Prop封装可复用的底部导航组件ForEach循环渲染 条件判断实现不同 Tab 样式margin({ top: -16 })实现凸起按钮效果router.replaceUrl避免 Tab 切换时路由栈膨胀10.2 实战建议中间凸起按钮的margin({top: -16})值需根据导航栏高度调整Tab 切换时用replaceUrl而非pushUrl避免栈溢出所有 Tab 页面路径集中管理在pages数组中总结本文详细拆解了小分享 App BottomTabBar 自定义底部导航栏组件的完整实现从Tab 布局、凸起按钮、Prop 高亮、路由切换到组件复用涵盖了底部导航栏的全部核心知识点。下一篇我们将深入State与Prop状态管理讲解 Tab 高亮联动的实现原理。附录完整代码索引本文涉及的所有代码片段均来自小分享 App 的以下文件文件路径说明components/BottomTabBar.ets底部导航栏组件common/interfaces.etsTabItem 接口定义pages/HomePage.ets首页使用 BottomTabBarpages/DiscoverPage.ets发现页使用 BottomTabBarpages/FavoritesPage.ets收藏页使用 BottomTabBarpages/ProfilePage.ets个人中心使用 BottomTabBar以上代码均可在小分享 App 工程中查看完整实现。第一步了解组件的基本用法第二步掌握组件的核心属性如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力
