基于鸿蒙生态的轻量化记账工具开发:融合 ArkUI 组件与分布式数据管理
前言
本文通过'易记账'鸿蒙应用实例开发过程中的关键技术场景,从 entry 模块构建启动到业务交互的核心链路入手,借助 common 模块实现跨页面代码复用,利用 ArkUI 组件快速搭建账单录入与统计界面,以及 DatePickerDialog 在不同业务场景下的适配使用,还原鸿蒙技术在实际项目中的落地过程。
项目简介

AppScope 存放应用级全局资源与配置,确保全应用样式、常量统一;common 集中管理多模块复用的通用代码、组件与工具类,提升开发效率;entry 作为应用入口模块,承载主界面与核心记账业务逻辑,是用户交互的核心;oh_modules 存储项目依赖的鸿蒙相关模块,为功能实现提供基础支持;screenshots 用于归档应用界面截图,方便项目文档说明使用。
鸿蒙技术实践:易记账
模块分层与启动管理:entryability 串联应用生命周期
- entryability:易记账启动核心,负责 APP 启动时初始化全局上下文、数据库和设置工具,指定打开首页 pages/Index,并监控 APP 从启动到关闭的全生命周期状态,衔接底层能力和用户界面的关键。
首页账单展示:基于 ArkUI 组件的统计与列表呈现
- index.ets 首页组件:展示用户的账单数据与核心统计信息。页面加载时会从数据库拉取所有账单,自动计算并统计总收入、总支出金额。界面上通过 BalanceViewer 组件展示收支统计结果与日期选择功能,用 BalanceList 组件列出所有账单明细,还通过 PageEntries 组件提供页面入口导航,是用户查看账单汇总与明细的核心入口。
账单录入交互:自定义键盘与原生组件的融合应用
- addBalance.ets 新增账单页面组件:让用户选择收支类型、对应的具体类别,通过自定义的数字键盘输入金额,还能添加备注、选择日期,最后把这些账单信息存入数据库,完成账单记录支出。
年度账单统计:数据分层处理与多维度展示
- BillinfoPage.ets 年度账单统计页面组件:展示指定年份的收支汇总数据。页面加载时会从数据库拉取所有账单,通过工具类 BillingInfoUtils 按月份拆分数据,计算并展示'年结余、年收入、年支出'总览,以及每个月的收入、支出、结余明细。用户可点击年份区域,通过内置的 DatePickerDialog 选择其他年份,页面会自动更新对应年份的统计数据,是用户查看年度财务状况的核心界面。
鸿蒙原生组件实践:DatePickerDialog 的差异化场景应用
| 维度 | AddBalance.ets | BillInfoPage.ets |
|---|---|---|
| 用途 | 选择单条账单的具体日期(精确到日) | 选择年度统计的年份(核心是年份) |
| 触发元素 | 页面中部的'年 / 月 / 日'文本 | 页面顶部的'年份 + 年'文本 |
| 数据更新 | 分别更新 activeYear, activeMonth, activeDay | 更新 activeDate 对象的年份 |
| 弹窗作用 |



