鸿蒙 ArkTS 实战：Parking Fee Meter 从停车计费器到停车计费应用完整解析

鸿蒙 ArkTS 实战Parking Fee Meter 从停车计费器到停车计费应用完整解析前言停车计费器 是一个非常适合用鸿蒙 ArkTS 来实现的轻量工具型页面。它围绕“根据停车小时、分钟和会员状态计算停车费适合商场、景区和社区停车场的临时预估。”这个明确目标把输入、计算、结果和操作收拢在同一屏内业务路径十分清晰。本文直接从 Parking Fee Meter 的真实源码出发拆解它如何使用State、Slider、Toggle、ForEach、条件渲染和计算方法把一个小工具写得既顺手又容易维护。工具页面的价值在于把复杂计算压缩成一眼能读懂的结果。图示说明本文围绕输入参数区、状态结果区、操作按钮区和辅助说明区展开所有示例都对应项目中的真实逻辑。一、场景定位1.1 业务目标根据停车小时、分钟和会员状态计算停车费适合商场、景区和社区停车场的临时预估。1.2 用户操作路径先看默认数值是否符合预期。再通过滑杆、按钮或开关调整参数。页面实时刷新结果。根据结果做出记录、决策或确认。1.3 技术关注点关注点页面体现实现方式参数输入滑杆、切换、按钮Slider / Toggle / Button状态保存数字、布尔、字符串State计算逻辑费用、时间、进度、换算方法封装结果反馈文案、颜色、数字变化Text / 条件样式二、页面入口2.1 组件骨架EntryComponentstruct Index{build(){Column(){Text(停车计费器)}}}2.2 单页工具的好处停车计费器 的状态字段数量不多但每个字段都直接参与结果输出。单页结构能让逻辑一眼看清不需要复杂的页面跳转。2.3 页面布局拆分区域作用常见组件顶部主题和核心结果Row、Text、Stack中部参数输入Slider、Toggle底部补充说明Text、Button三、状态设计3.1 State 表字段类型含义hoursnumber停车小时默认 2minutesnumber停车分钟默认 30memberboolean是否会员默认开启3.2 状态声明EntryComponentstruct Index{Statehours:number2;// 停车小时默认 2Stateminutes:number30;// 停车分钟默认 30Statemember:booleantrue;// 是否会员默认开启}3.3 设计原则这些状态都很贴近业务不存在多余包装。比如金额、小时、人数、阶段、布尔开关都是能直接解释给用户听的字段。好的状态设计应该让人看代码就知道界面会怎么变。四、业务数据与数组4.1 数组内容无数组字段页面围绕停车时长和会员折扣完成单次计费4.2 ForEach 示例ForEach(this.items,(item:string,index:number){Text(item).onClick((){this.selectedindex})})4.3 索引映射Text(this.items[this.selected]).backgroundColor(this.selectedindex?#2563EB:#FFFFFF)这种写法很适合固定选项和固定计算模板。五、输入控件5.1 SliderSlider 在这批项目里非常常见因为它最适合调节连续参数。Slider({value:this.value,min:0,max:100,step:1}).onChange((value:number){this.valueMath.round(value)})5.2 ToggleToggle 适合表示保价、会员、确认、开关等二值状态。Toggle({type:ToggleType.Switch,isOn:this.enabled}).onChange((on:boolean){this.enabledon})5.3 ButtonButton 适合离散动作比如下一步、重置、增加、清零。Button(重置).backgroundColor(#2563EB)六、交互行为6.1 动作列表滑杆调整小时和分钟Toggle 切换会员状态bill 方法按小时向上取整会员按 8 折计价6.2 关键源码bill():number{letbillHours:numberthis.hours(this.minutes0?1:0)letraw:numberbillHours*6returnthis.member?Math.round(raw*0.8):raw}6.3 动作闭环滑杆调整小时和分钟Toggle 切换会员状态bill 方法按小时向上取整会员按 8 折计价这类页面特别强调“输入即结果”。用户不需要点击提交状态变化后结果就应该刷新。七、公式与计算7.1 核心公式billHourshours(minutes0?1:0);billbillHours*6*discount7.2 结果方法当公式不止一步时放进方法里最清楚privatecalc():number{returnMath.round(1)}7.3 结果区域Text(结果String(value)).fontSize(40).fontWeight(FontWeight.Bold).fontColor(#2563EB)八、组件细节8.1 TextText 用来放金额、分钟、距离、轮次、说明是工具页里最核心的反馈组件。8.2 StackStack 可以承载圆形背景和大数字让结果看上去更聚焦。Stack(){Circle().width(190).height(190).fill(#F8FAFC)Text(核心结果)}8.3 条件文案Text(this.done?已完成:继续调整)8.4 条件颜色.fontColor(this.warning?#DC2626:#2563EB)九、布局方式9.1 左右布局部分页面采用左侧结果、右侧参数的结构更适合大数字展示。9.2 上下布局如果需要逐步输入参数上下布局会更顺手。9.3 视觉层级内容推荐位置原因结果顶部/中心最先看到参数中部方便拖动说明底部不打扰操作十、调试与验证10.1 验证路径看默认值是否正确。改一个参数确认所有结果变化。检查边界值是否稳定。检查文案与颜色是否同步。10.2 日志辅助Button(调试).onClick((){console.info(value changed)})10.3 常见问题问题原因处理方式数值没变化没写回 State检查赋值计算不对公式少了括号单独封装方法文案不刷新Text 没绑定状态改成状态表达式超出边界缺少 if 限制加最大值/最小值十一、扩展能力11.1 保存历史工具类应用很适合保存最近一次输入方便下次继续使用。11.2 分享结果换算结果、计费结果和排期结果都可以导出成文本。{tool:停车计费器,theme:停车计费,state:hours、minutes、member}11.3 多方案比较当同类工具需要比较不同方案时可以把当前页面扩成左右对照模式。十二、体验优化12.1 单位标注金额要带“元”时间要带“分钟”或“小时”重量要带“kg”容量要带“ml”。12.2 即时反馈每次滑杆移动都应该立刻刷新让用户知道自己改了什么。12.3 参数范围参数范围要贴合业务不要为了演示设置过宽的区间。十三、完整实现片段13.1 状态骨架EntryComponentstruct Index{Statehours:number2;// 停车小时默认 2Stateminutes:number30;// 停车分钟默认 30Statemember:booleantrue;// 是否会员默认开启}13.2 数据配置// 无数组字段页面围绕停车时长和会员折扣完成单次计费privateprimaryColor:string#2563EB13.3 交互代码bill():number{letbillHours:numberthis.hours(this.minutes0?1:0)letraw:numberbillHours*6returnthis.member?Math.round(raw*0.8):raw}13.4 结果样式Text(计算结果).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#2563EB)十四、可复用模式14.1 状态模式number 处理金额、时长、距离、轮次。boolean 处理开关、会员、保价、确认。string 处理阶段、模式和方向。14.2 交互模式这类页面最常见的模式是滑杆改数值按钮做动作文本直接回显。14.3 视觉模式大结果、小说明、主题色按钮是工具类页面非常稳的组合。十五、总结15.1 参数表述停车计费器 的参数表述要保持业务可读性。用户看到 hours、minutes、member 时应该能立刻理解这些字段对应金额、时间、数量、开关还是当前选项。15.2 公式透明公式billHours hours (minutes 0 ? 1 : 0); bill billHours * 6 * discount不应该只停留在代码里。页面通过大号结果、单位说明和辅助文案把公式含义转成用户能直接使用的结果。15.3 状态回放后续如果加入历史记录可以把每次输入和结果保存下来形成可回放的数据流。interfaceToolHistoryItem{title:stringinput:stringresult:stringcreatedAt:string}十六、总结Parking Fee Meter 用简洁的 ArkTS 代码完成了 停车计费 场景。它围绕 hours、minutes、member 建模围绕 无数组字段页面围绕停车时长和会员折扣完成单次计费 组织数据并通过billHours hours (minutes 0 ? 1 : 0); bill billHours * 6 * discount把输入变化转成即时结果。这类工具页面最关键的不是页面多而是逻辑清楚、反馈直接、边界稳定。把这些做好鸿蒙 ArkTS 就能很自然地承载各种计算器、记录器和排期工具。相关链接HarmonyOS 应用开发指南ArkTS 快速入门ArkUI 声明式开发ArkUI 组件总览