鸿蒙ArkUI实战构建分类支出占比面板技术栈HarmonyOS · ArkUI · ArkTS在统计预算场景中核心问题是统计组件的价值不在于颜色丰富而在于金额、比例、趋势和预算是否来自同一口径能否帮助用户做判断。本文以“随手账本”为示例围绕“构建分类支出占比面板”展开重点讲解界面结构、状态组织、交互逻辑与测试方法。实现目标是增加分类占比面板以进度条、金额和百分比表达支出构成让分类比较比单看金额更直观。1. 运行效果2. 实现目标完成本文后可以掌握以下内容理解“构建分类支出占比面板”在记账应用中的界面职责和信息层级掌握相关 ArkUI 组件的组合方式与样式设置梳理State状态、事件回调和界面刷新之间的关系通过正常路径、边界输入和页面回归验证实现结果。3. 开发环境项目配置开发框架 / 语言HarmonyOS ArkUI / ArkTSIDEDevEco Studio 6.1.1 Release模拟设备Pura 90系统版本HarmonyOS 6.1.1(24)示例包名com.huihui.harmony.pocketledger核心页面文件Index.ets4. 方案设计从业务流程看该功能位于以下链路中账单数据 → 汇总 → 比例/趋势 → 洞察 → 预算 → 预警实现“分类占比”前可以先拆解以下四个问题输入是什么已有账单、页面偏好、用户输入还是固定演示数据状态放哪里是否需要State还是只做单向展示结果在哪里可见文字、颜色、列表、进度或页面分支如何变化失败时怎么办空输入、取消、越界、异常或未接入系统能力如何说明。本文采用的设计方案是增加分类占比面板以进度条、金额和百分比表达支出构成让分类比较比单看金额更直观。实现时尤其需要注意分类百分比总和要考虑四舍五入不能出现肉眼可见的 101%。这既关系到代码正确性也直接影响最终的使用体验。5. 核心代码解析以下代码展示了该功能的核心实现Column({space:11}){Text(分类占比).fontSize(18).fontWeight(FontWeight.Bold).fontColor(this.mainText()).width(100%);Row(){Text(餐饮).fontSize(14).fontColor(this.mainText()).width(80);Progress({value:42,total:100,type:ProgressType.Linear}).color(#315BEA).backgroundColor(#E8ECF4).height(10).layoutWeight(1);Text(42%).fontSize(13).fontColor(this.subText()).width(50).textAlign(TextAlign.End)}.width(100%);Row(){Text(购物).fontSize(14).fontColor(this.mainText()).width(80);Progress({value:28,total:100,type:ProgressType.Linear}).color(#7C5CE7).backgroundColor(#E8ECF4).height(10).layoutWeight(1);Text(28%).fontSize(13).fontColor(this.subText()).width(50).textAlign(TextAlign.End)}.width(100%);Row(){Text(交通).fontSize(14).fontColor(this.mainText()).width(80);Progress({value:18,total:100,type:ProgressType.Linear}).color(#18A17B).backgroundColor(#E8ECF4).height(10).layoutWeight(1);Text(18%).fontSize(13).fontColor(this.subText()).width(50).textAlign(TextAlign.End)}.width(100%)}.width(100%).padding(18).backgroundColor(this.cardBackground()).borderRadius(22)组件与状态说明观察项说明组件构成Column× 1、Row× 3、Text× 7、Progress× 3链式属性 / 事件fontSize、fontWeight、fontColor、mainText、width、color、backgroundColor、height、layoutWeight、subText、textAlign、padding读取状态this.mainText、this.subText、this.cardBackground关键文字“分类占比”、“100%”、“餐饮”、“42%”、“购物”、“28%”、“交通”、“18%”显式颜色#315BEA、#E8ECF4、#7C5CE7、#18A17B阅读代码时不要只关注组件数量还要检查数据从哪里来、状态在哪里读取、事件如何写回以及最终由哪个组件呈现结果。6. 状态与交互ArkUI 的响应式更新可以按照“状态声明 → 组件读取 → 事件写入 → 界面刷新”理解。本文涉及的主要状态如下StateprivatestatMonth:string2026年7月;该区域以数据展示为主没有新增点击或输入事件。实现重点是保证数据口径一致、视觉层级清晰并在主题或窗口变化时保持可读性。7. 深入实现从可运行到可维护7.1 先明确功能边界“分类支出占比”真正需要解决的数据是各支出分类金额及总支出状态核心是占比、颜色和排序结果。界面完成的标准不只是能看到对应组件而是从数据进入页面开始到用户操作、状态更新、结果渲染形成完整闭环。本文实现中的主路径是按金额计算比例并呈现分类构成。如果只验证静态截图而没有检查状态变化后的结果就很容易遗漏看得见但用不稳的问题。验收时可以把功能拆成四个层次数据层确认字段来源、默认值和计算口径避免页面中出现多份互相独立的“同一数据”状态层只保存真正会变化且需要驱动界面的值可由已有数据计算出的结果不重复保存视图层通过组件层级、字号、间距和语义颜色呈现主次关系交互层明确点击、输入、取消、确认和失败后的状态去向。统计页面最容易出现“图画对了、数据口径错了”的问题。所有卡片、图表和洞察必须基于同一时间范围、同一收支定义以及同一金额精度。统计计算应先生成结构化结果再交给组件绘制组件只负责把数值映射为文字、长度和颜色不负责偷偷修正业务数据。7.2 组件树与职责划分当前核心区域使用了Column× 1、Row× 3、Text× 7、Progress× 3相关属性和事件包括fontSize、fontWeight、fontColor、mainText、width、color、backgroundColor、height、layoutWeight、subText、textAlign、padding。这些组件不应该平铺在一个超长的build()方法中。更稳妥的拆分方式是让页面组件负责整体布局让业务组件接收展示数据和回调让纯函数负责计算与格式化。例如页面只把“当前值、是否选中、点击后做什么”传给子组件子组件不直接修改不属于自己的账单、预算或账户集合。可以把调用关系整理为原始业务数据 ↓ 格式化 / 筛选 / 汇总等纯计算 ↓ 页面展示模型 ↓ ArkUI 组件读取状态 ↓ 事件回调更新唯一数据源 ↓ 依赖该数据的组件重新渲染这条链路中最需要避免的是“双向手工同步”。例如同一个结果既保存在页面字段中又能由账单数组计算得到那么任何一次新增、编辑或删除都可能只更新其中一份。对于本功能建议围绕“占比、颜色和排序结果”建立唯一入口并让其他显示值按需派生。7.3 状态更新为什么能驱动界面文章代码中读取的状态包括this.mainText、this.subText、this.cardBackground。ArkUI 会跟踪组件在构建阶段读取的响应式状态当事件回调写入新值后相关界面会重新计算。这里的重点不是把所有变量都标记为State而是保持状态最小化。临时输入、页面选择和异步结果可以是状态固定配置、格式化规则和可计算结果则更适合使用普通字段或方法。统计更新应先确定月份或预算周期再对该区间的账单执行一次聚合生成收入、支出、分类占比、每日序列和预算状态。图表与卡片共享这份统计结果不能分别筛选原始账单。比例展示可以限制在可视范围但原始金额与真实比例必须保留。本功能的重点边界是总额为零、四舍五入误差和分类过多不能产生错误百分比。边界处理不应只靠禁用按钮还需要在真正的提交函数中再次校验因为业务方法未来可能从其他入口被调用。对于金额、比例和日期等数据还应在进入模型时完成标准化页面层只负责展示已经可信的结果。7.4 交互反馈与异常路径统计功能要用可验证的手工样本核对计算结果准备少量已知收入和支出先算出期望总额与比例再对照页面。专项场景包括全零数据、单一分类、支出超过预算、跨月七日窗口和相同最大值。颜色只能表达辅助语义关键数值仍需使用文字呈现。建议至少补充下面这组专项检查检查维度验证内容初始状态默认值与页面文案一致不依赖上一次热更新残留连续操作快速点击或重复提交不会生成重复结果取消恢复关闭弹层或返回页面后正式数据没有被草稿污染极端数据空值、零值、负值、超长文本或超大金额得到合理处理主题与布局深色主题、窄屏和字体放大后仍能识别主要信息回归验证修改该功能后首页汇总、列表、统计或设置中的关联区域保持一致7.5 面向真实项目的改进方向金额聚合建议使用最小货币单位比例计算要显式处理分母为零。图表高度可以限制在可视范围内但原始值必须保留给文字与无障碍描述。月份、日期窗口和预算周期应由统一的 DateRange 工具生成避免每个模块分别计算后出现边界不一致。针对“分类支出占比”推荐的重构方向是保留原始金额并仅在展示层格式化比例。重构时不要一次改动所有层可以先把纯计算提取出来并补测试再拆业务组件最后接入持久化或系统能力。这样每次调整都有可验证结果也能减少界面代码与数据逻辑相互牵连。建议把月份区间、金额聚合、比例计算和洞察规则拆成纯函数并为零分母、精度和边界日期补单元测试。图表组件只接收已经整理好的序列和标签。这样调整视觉尺寸时不会改变统计口径新增图表也能复用同一份聚合结果。8. 关键实现推演8.1 数据流不能停留在截图层面“鸿蒙ArkUI实战构建分类支出占比面板”是否真正完成不能只看目标区域是否已经出现还要检查数据从产生到显示的全过程。分类面板先求各分类支出和总支出再计算比例未知分类使用兜底配置但金额仍计入总额。统计页面必须先确定唯一的日期范围和金额口径再从同一批账单生成收入、支出、每日序列、分类占比与预算状态。各卡片和图表共享这份结构化统计结果不能分别筛选原始数组否则月初月末、退款记录或收入排除规则稍有不同页面就会出现互相矛盾的数字。对 ArkUI 页面而言State更适合保存会被交互修改、并且确实需要驱动界面的最小状态能够由现有数据计算出的标题、金额、选中样式或列表结果应尽量按需派生。这样既减少同步点也让问题出现时能够沿着“输入—规则—状态—视图”快速定位。8.2 设计取舍决定后续维护成本本功能需要特别坚持的一项取舍是比例之和受四舍五入影响时文字可以说明精度不能为了凑整而篡改原始金额。这种约束看似比直接把逻辑写进组件多了一层但它能避免页面同时承担数据校验、业务计算和视觉呈现后续修改也更容易控制影响范围。金额聚合适合使用最小货币单位比例计算需要显式处理分母为零。图形高度可以为了可视性做归一化或上限控制但原始金额和真实比例必须保留给文字标签与无障碍描述。颜色只承担辅助区分不能代替分类名称、数值或状态文字对于非常小的占比还应保证最低可见尺寸与准确数值同时存在。实现过程中可以先保证业务语义准确再逐步调整视觉细节。若数据口径、状态归属或失败路径仍不明确单纯增加圆角、阴影和动画只会把问题隐藏得更深。8.3 边界场景要按连续操作验证本功能的重点边界包括总支出为零、单一分类、极小占比、未知分类和分类数量很多都要验证。验证时不应只做一次静态操作而要组成连续路径例如先改变条件、再执行核心动作、随后切换页面并返回最后重新启动应用检查状态是否符合预期。连续路径更容易暴露草稿污染、异步覆盖、列表位置变化和派生结果未刷新等问题。统计正确性最好使用可手算的小样本验证预先准备几笔跨日、跨分类、包含零值或超预算的账单先得到期望结果再逐项对照页面。月份切换、七日窗口、全零数据、只有收入、只有单一分类和预算为零都是必要边界。性能优化应放在聚合层通过一次遍历或缓存结果减少重复扫描。每次修复后除了重测当前功能还应回归与它共享同一数据源的首页、列表、统计、账户或设置区域防止局部正确而全局口径失配。8.4 从示例代码演进到真实项目继续扩展时可输出 CategoryShare 模型同时包含原始金额、真实比例和展示比例。组件输入尽量保持只读操作通过语义清晰的回调或命令向上提交业务层返回成功结果或结构化错误页面根据结果决定刷新、保留草稿、显示反馈还是允许重试。工程中可以拆出 DateRange、LedgerAggregator、BudgetEvaluator 与 InsightRule 等纯函数模块并为边界日期、金额精度和零分母补充单元测试。图表组件只接收已经整理好的标签、原始值和显示比例。这样调整图形尺寸不会改变业务计算增加新的统计视图时也能复用同一份可信结果。完成重构后可以用四个问题做验收事实数据是否只有一个可信来源、派生结果是否使用统一规则、失败后是否保留可恢复状态、跨页面结果是否保持一致。四项都能回答清楚功能才算从演示效果进入可维护状态。9. 测试要点场景操作预期结果冷启动停止旧 Ability 后启动应用能看到“分类占比”不依赖热更新残留主路径按金额计算比例并呈现分类构成目标区域与关联数据同步更新页面没有额外副作用边界路径验证“总额为零、四舍五入误差和分类过多不能产生错误百分比”页面保持可用正式数据不被无效状态污染导航回归切换底部栏目后返回stats目标内容仍存在导航选中态正确可读性检查标题、数值、辅助文字、颜色和换行主结果优先文字不被遮挡或截断测试时重点观察分类百分比总和要考虑四舍五入不能出现肉眼可见的 101%。展示型功能应检查数据口径、文字换行和不同窗口下的可读性交互型功能还应覆盖空值、取消、重复点击和返回页面后的状态一致性。10. 常见问题与排查坑一分类百分比总和要考虑四舍五入不能出现肉眼可见的 101%。排查时要区分表单草稿、字段错误和正式业务数据。先确认输入事件是否只更新草稿再检查提交函数是否重新校验。“分类支出占比”出现异常时不应通过清空全部状态规避问题而要定位占比、颜色和排序结果在哪个回调中被提前或重复写入。坑二生产项目应统一金额精度策略避免浮点运算产生尾差。排查“生产项目应统一金额精度策略避免浮点运算产生尾差”时先分别记录原始金额、计算中间值和最终展示值确认单位与精度没有在中途变化。“分类支出占比”应围绕“占比、颜色和排序结果”保持单一口径分母为零、负值和超大数值要单独覆盖不能只观察正常示例。坑三柱高、百分比和文字金额必须使用同一统计口径。排查“柱高、百分比和文字金额必须使用同一统计口径”时先分别记录原始金额、计算中间值和最终展示值确认单位与精度没有在中途变化。“分类支出占比”应围绕“占比、颜色和排序结果”保持单一口径分母为零、负值和超大数值要单独覆盖不能只观察正常示例。11. 工程化建议示例代码可以集中在Index.ets中便于理解但随着功能增加建议逐步按职责拆分页面层负责页面结构与路由切换业务组件层封装卡片、表单、列表项和状态提示模型与计算层管理账单、账户、预算等数据结构和纯计算逻辑基础服务层处理 Preferences、文件导入导出、通知和认证测试层覆盖纯函数、组件交互和设备端关键路径。对于“构建分类支出占比面板”优先保证组件输入、输出和回调职责清晰避免页面组件直接承担全部业务状态。12. 总结本文围绕“分类支出占比”完成了界面与状态逻辑。实现关键是让各支出分类金额及总支出拥有明确来源并由“占比、颜色和排序结果”驱动 ArkUI 组件刷新。完成主路径后还需要验证总额为零、四舍五入误差和分类过多不能产生错误百分比。如果继续用于真实项目建议保留原始金额并仅在展示层格式化比例使界面代码、业务计算与数据保存保持清晰边界。官方参考资料ArkUI 开发指南ArkTS 状态管理概述