当前位置： 首页 > news >正文

HarmonyOS NEXT 企业级记账APP：实现底部 Tab 导航

news 2026/7/29 2:44:29

实现底部 Tab 导航

本文是《HarmonyOS NEXT 企业级开发实战：30篇打造智能记账APP》系列的第04篇，对应 Git Tagv0.0.4。承接第 03 篇的主题系统，本篇使用 ArkUI 的 Tabs 组件搭建首页、统计、预算、我的四个底导航 Tab，并封装 AppTabBar 通用组件。

前言

底导航 Tab 是移动应用的核心导航模式，用户 80% 的操作都从底导航发起。HarmonyLedger 规划四个主 Tab：首页、统计、预算、我的。ArkUI 提供原生Tabs组件支持底导航，但企业级项目需要封装统一的 AppTabBar 组件，便于后续扩展与主题适配。

本文将带你：

  1. 使用 ArkUI Tabs 组件搭建底导航框架
  2. 封装 AppTabBar 通用组件（支持图标、文字、主题色）
  3. 实现四个 Tab 页面占位与切换动效
  4. 集成主题系统响应深色模式

企业级核心原则：底导航必须封装复用、禁止重复、支持主题。参考 ArkUI Tabs 组件 了解官方约定。

一、Tab 规划

1.1 四个主 Tab

HarmonyLedger 选用最经典的四 Tab布局，覆盖核心业务场景：

Tab 序号名称图标页面业务
0首页homeHomeView账单汇总、快捷新增
1统计chartStatisticsView收支图表分析
2预算budgetBudgetView预算设置与进度
3我的userProfileView设置、关于

1.2 Tab 命名规范

Tab 命名规范： - 英文小写下划线：home / chart / budget / user - 中文展示用：首页 / 统计 / 预算 / 我的 - 图标资源：icon_tab_{name}.png - 路由页面：{Name}View.ets（大驼峰） - 资源字符串：tab_{name}_label

设计要点：Tab 命名一旦确定禁止修改，否则会牵动图标、路由、字符串多处资源。

二、Tabs 组件基础

2.1 Tabs 与 TabContent

ArkUI 原生 Tabs 组件使用方式：

@Entry @Component struct MainView { @State currentIndex: number = 0; build() { Tabs({ index: this.currentIndex }) { TabContent() { HomeView() } .tabBar({ text: '首页', icon: $r('app.media.icon_tab_home') }) TabContent() { StatisticsView() } .tabBar({ text: '统计', icon: $r('app.media.icon_tab_chart') }) TabContent() { BudgetView() } .tabBar({ text: '预算', icon: $r('app.media.icon_tab_budget') }) TabContent() { ProfileView() } .tabBar({ text: '我的', icon: $r('app.media.icon_tab_user') }) } .barPosition(BarPosition.End) .onChange((index: number) => { this.currentIndex = index; }) } }

2.2 关键属性

属性说明值
barPositionTab 位置BarPosition.End（底导航）/Start（顶导航）
vertical是否纵向false（默认横向）
scrollable可滚动false（四 Tab 不需滚动）
onChange切换回调(index: number) => void
tabBarTab 标签配置{ text, icon }

踩坑点：TabContent不能直接传 builder 参数，必须用.tabBar(...)设置标签。这是鸿蒙 ArkUI 的强制约束。

三、封装 AppTabBar

3.1 组件设计目标

企业级底导航需要满足：

  1. 图标+文字双显示
  2. 未选中态灰色、选中态主题色
  3. 响应深色模式颜色自动切换
  4. Badge 角标支持消息提醒
  5. 可配置Tab 数量与内容

3.2 TabConfig 数据模型

// model/TabConfig.ets export class TabConfig { name: string; // 'home' / 'chart' / 'budget' / 'user' label: string; // 显示文字 icon: Resource; // 图标资源 badge?: number = 0; // 角标数字，0 不显示 constructor(name: string, label: string, icon: Resource, badge?: number) { this.name = name; this.label = label; this.icon = icon; this.badge = badge ?? 0; } }

3.3 AppTabBar 组件实现

// components/navigation/AppTabBar.ets import { TabConfig } from '../../model/TabConfig'; import { AppColors } from '../../theme/Colors'; import { AppFontSize } from '../../theme/Typography'; import { AppSpace } from '../../theme/Spacing'; @Component export struct AppTabBar { @Prop tabs: TabConfig[] = []; @Prop currentIndex: number = 0; @BuilderParam onTabClick: (index: number) => void; build() { Row() { ForEach(this.tabs, (tab: TabConfig, index: number) => { Column() { Image(tab.icon) .width(24) .height(24) .fillColor(this.currentIndex === index ? AppColors.Budget : AppColors.SecondaryText) Text(tab.label) .fontSize(AppFontSize.XS) .fontColor(this.currentIndex === index ? AppColors.Budget : AppColors.SecondaryText) .margin({ top: AppSpace.XS }) // Badge 角标 if (tab.badge > 0) { Text(tab.badge.toString()) .fontSize(10) .fontColor('#FFFFFF') .backgroundColor(AppColors.Expense) .borderRadius(8) .padding(2) .position({ x: 24, y: -4 }) } } .layoutWeight(1) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .onClick(() => { this.onTabClick(index); }) }, (tab: TabConfig) => tab.name) } .width('100%') .height(56) .backgroundColor(AppColors.CardBackground) .border({ width: { top: 1 }, color: AppColors.Separator }) } }

关键技术：@BuilderParam用于将点击回调暴露给父组件，这是 ArkUI V1 组件通信的标准方案。

四、四个 Tab 页面占位

4.1 HomeView 占位

// pages/HomeView.ets @Entry @Component struct HomeView { build() { Column() { Text('首页') .fontSize(24) .fontWeight(FontWeight.Bold) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) } }

4.2 StatisticsView 占位

// pages/StatisticsView.ets @Entry @Component struct StatisticsView { build() { Column() { Text('统计分析') .fontSize(24) .fontWeight(FontWeight.Bold) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) } }

4.3 BudgetView 与 ProfileView

// pages/BudgetView.ets @Entry @Component struct BudgetView { build() { Column() { Text('预算中心') .fontSize(24) .fontWeight(FontWeight.Bold) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) } } // pages/ProfileView.ets @Entry @Component struct ProfileView { build() { Column() { Text('我的') .fontSize(24) .fontWeight(FontWeight.Bold) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) } }

五、主页面集成

5.1 MainView 集成 Tabs

// pages/MainView.ets import { AppTabBar } from '../components/navigation/AppTabBar'; import { TabConfig } from '../model/TabConfig'; import { HomeView } from './HomeView'; import { StatisticsView } from './StatisticsView'; import { BudgetView } from './BudgetView'; import { ProfileView } from './ProfileView'; @Entry @Component struct MainView { @State currentIndex: number = 0; @State tabs: TabConfig[] = [ new TabConfig('home', '首页', $r('app.media.icon_tab_home')), new TabConfig('chart', '统计', $r('app.media.icon_tab_chart')), new TabConfig('budget', '预算', $r('app.media.icon_tab_budget')), new TabConfig('user', '我的', $r('app.media.icon_tab_user')) ]; build() { Stack({ alignContent: Alignment.TopStart }) { // 内容区 Column() { if (this.currentIndex === 0) { HomeView() } else if (this.currentIndex === 1) { StatisticsView() } else if (this.currentIndex === 2) { BudgetView() } else { ProfileView() } } .width('100%') .height('100%') .padding({ bottom: 56 }) // 底导航 AppTabBar({ tabs: this.tabs, currentIndex: this.currentIndex, onTabClick: (index: number) => { this.currentIndex = index; } }) } .width('100%') .height('100%') } }

5.2 路由配置更新

// entry/src/main/resources/base/profile/main_pages.json { "src": [ "pages/MainView", // 主入口改为 MainView "pages/HomeView", "pages/StatisticsView", "pages/BudgetView", "pages/ProfileView" ] }
// EntryAbility.ets 入口改为 MainView windowStage.loadContent('pages/MainView', (err) => { ... });

架构调整：入口从 HomeView 改为 MainView，底导航由 MainView 持有，四个 Tab 页面作为子组件。这是鸿蒙多 Tab 应用的标准结构。

六、图标资源准备

6.1 Tab 图标规格

项规格
尺寸24x24 dp
格式PNG（带 alpha 通道）或 SVG
色彩单色（通过 fillColor 染色）
命名icon_tab_{name}.png

6.2 资源放置

entry/src/main/resources/base/media/ ├─ icon_tab_home.png ├─ icon_tab_chart.png ├─ icon_tab_budget.png └─ icon_tab_user.png

统一染色方案：图标统一用白色 PNG，通过Image.fillColor()动态染色。这样未选中态、选中态、深色模式都能复用同一张图。

七、最佳实践

7.1 Tab 切换性能优化

// ❌ 错误：每次切换都重建所有 Tab 页面 Tabs() { TabContent() { HomeView() } TabContent() { StatisticsView() } // 切换到统计时，HomeView 仍在后台占用内存 } // ✅ 正解：用 if 懒加载 Stack() { if (this.currentIndex === 0) { HomeView() } else if (this.currentIndex === 1) { StatisticsView() } }

7.2 Tab 状态保持

如果希望 Tab 切换时保留各页面状态：

@State homeState: HomeState = new HomeState(); @State statsState: StatsState = new StatsState(); // 用 Stack 叇叠所有页面，通过 visibility 控制 Stack() { HomeView({ state: this.homeState }).visibility(this.currentIndex === 0 ? Visibility.Visible : Visibility.Hidden) StatisticsView({ state: this.statsState }).visibility(this.currentIndex === 1 ? Visibility.Visible : Visibility.Hidden) }

权衡：状态保持会占用更多内存，HarmonyLedger 暂不启用，后续 v0.2.7 性能优化篇再讨论。

八、运行验证

8.1 编译检查

hvigorw assembleHap--modemodule-pproduct=default

8.2 运行验证

  1. 应用启动后显示首页，底导航四个 Tab 均可见
  2. 点击"统计" Tab，切换到统计分析页
  3. 选中态 Tab 文字和图标变蓝色（AppColors.Budget）
  4. 未选中态 Tab 灰色，深色模式下同步切换

九、常见问题

9.1 TabContent 传参错误

错误原因解决
TabContent(builder)不渲染不能传 builder 对象用TabContent() { ... }包裹内容
图标不显示资源路径错误检查$r('app.media.icon_tab_xxx')名是否一致

9.2 切换闪烁

// 原因：if 切换会销毁重建页面 // 解决：用 visibility 保留所有页面 .visibility(currentIndex === index ? Visibility.Visible : Visibility.Hidden)

9.3 底部遮挡

// 内容区需预留底导航高度 Column() { ... } .padding({ bottom: 56 }) // 与 AppTabBar.height 一致

十、Git 提交

10.1 Commit Message

gitadd.gitcommit-m"feat(navigation): 实现底部 Tab 导航与 AppTabBar 封装 - 新增 AppTabBar 通用底导航组件 - 新增 TabConfig 数据模型 - 创建 HomeView/StatisticsView/BudgetView/ProfileView 占位页 - 集成 MainView 持有 Tabs 切换 - 更新 EntryAbility 入口为 MainView - 添加四个 Tab 图标资源"

10.2 CHANGELOG

## [v0.0.4] - 2026-07-27 ### Added - components/navigation/AppTabBar.ets：通用底导航组件 - model/TabConfig.ets：Tab 配置数据模型 - pages/MainView.ets：主页面持有 Tabs - pages/StatisticsView.ets、BudgetView.ets、ProfileView.ets：占位页 - 资源：icon_tab_home/chart/budget/user.png ### Changed - EntryAbility 入口改为 MainView - main_pages.json 增加 MainView 路由

附录：运行效果截图

上图展示了本模块的完整运行效果。实际项目中可使用 DevEco Studio 模拟器或真机截图替换此占位图。

总结

本文完整介绍了 HarmonyLedger底部 Tab 导航的实现，包含原生 Tabs 用法、AppTabBar 组件封装、四个 Tab 页面占位、主页面集成。通过本篇你可以：

  • 使用 ArkUI Tabs 组件搭建底导航
  • 封装可复用的 AppTabBar 组件支持图标+文字+角标
  • 实现主题色响应选中态与深色模式
  • 理解 EntryAbility 与 MainView 的入口关系

下一篇预告：《首页布局与 SummaryCard 设计》将开发首页核心 UI：今日支出、今日收入、最近账单列表，并封装 SummaryCard 汇总卡片组件。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源

  • 本篇源码：GitHub Tag v0.0.4
  • ArkUI Tabs 文档：tabs
  • ArkUI Image 组件：image
  • TabContent API：tabcontent
  • ArkUI 组件通信：component-communication
  • BarPosition 枚举：barposition
  • 鸿蒙图标资源规范：icon-resources
http://www.jsqmd.com/news/1284469/

相关文章：

  • 大模型入局医疗：小白也能看懂的未来健康管理革命！速收藏！
  • 图像生成算法：从随机噪声到高质量图像的转换
  • WordPress适合没有技术团队的企业吗？
  • 上海交大《动手学大模型》实战教程：200集零基础入门LLM与RAG开发
  • LangGraph实战：从零构建多智能体系统的图结构工作流
  • 从零搭建AI智能体：MCP协议、工具调用与工作流实战指南
  • （2026最新）贵阳本地漏水检测维修公司靠谱推荐：正规防水补漏上门维修-墙面/屋顶/外墙/暗管漏水检测精准定位 - 即刻修防水
  • 2026企业法律顾问，为何恒略多向联动更值得看？ - 科技焦点
  • 物联网安全：SE050安全元件与PIC18F46K40的硬件集成方案
  • MATLAB实战：LSTM时序预测从数据预处理到模型调参全解析
  • 架构演进的绞杀者与修缮
  • 分布式文件系统HDFS
  • 从零构建漫威主题激光对抗机器人：Arduino控制与差速转向实战
  • STM32与NBM7100A在低功耗物联网设备中的优化实践
  • 2026年7月国内靠谱的硅肥品牌推荐，元素肥/颗粒硼肥/钙 肥/动物源氨基酸/大量元素肥/高复配硅肥，硅肥厂家哪家好 - 品牌推荐师
  • 标准化SaaS系统和源码定制有什么区别？
  • 企业级AI Token配额管理：从成本管控到规模化应用实战
  • Arduino睡眠模式深度解析：从原理到实战，实现超低功耗设计
  • RK3568 Android 15驱动开发实战：基于正点原子开发板的完整教程
  • Vosk-Browser终极指南：如何在浏览器中轻松实现离线语音识别
  • OPENC函数在CAM/NC编程中的高效应用与优化技巧
  • 2026年北京本地居民力荐离婚律师 5位实战精选 - 本地品牌推荐
  • 构建容器编排平台DockerSwarm与Kubernetes对比
  • 抖音小店无货源1688选品上货：商品优化、侵权风险排查与合规上架实操指南 - 抖大侠
  • 行空板OpenCV目标追踪实战：从特征匹配到单应性矩阵优化
  • 麻雀优化算法在PID控制参数整定中的应用实践
  • 技术从业者的灵活策略：动态技能规划与上下文适应
  • Codesys HMI控件开发实战与工业自动化应用
  • 2026年选购指南：揭秘如何甄别真正合规的HDMI矩阵厂商
  • Arduino创意风扇：红外感应与PWM控制的智能交互实践