鸿蒙 ArkTS 实战：Rehab Training Table 从健康状态到交互卡片完整解析

鸿蒙 ArkTS 实战Rehab Training Table 从健康状态到交互卡片完整解析前言康复训练表 是一个面向健康管理与家庭安全的鸿蒙 ArkTS 小应用。管理康复动作、训练次数和报告导出适合恢复训练记录。 本文基于 entry/src/main/ets/pages/Index.ets 的真实源码结构展开重点分析数据模型、State 状态、业务方法、Builder 卡片和页面布局形成可直接发布的技术解析。图示说明页面以健康提醒、训练记录、家庭安全或装备维护为主题通过卡片和按钮把状态变化呈现出来。一、应用定位与业务闭环1.1 场景定位Rehab Training Table 的核心是把一个具体健康或家庭安全场景做成可操作的单页工具。用户可以记录信息、完成动作、查看反馈并通过列表卡片复盘历史或当前状态。业务环节页面表现ArkTS 实现数据记录输入与卡片State ForEach动作完成按钮点击private 方法状态反馈文案和计数派生计算安全提醒开关或提示文本布尔状态历史复盘列表卡片Builder 复用1.2 文章拆解路径分析接口和状态确认页面数据结构。分析方法确认业务动作如何更新状态。分析 Builder确认列表卡片如何复用。分析布局确认页面如何承载健康信息。实现原则健康类工具必须让用户知道当前状态、下一步动作和操作结果不能只展示静态文本。二、工程结构与入口页面2.1 文件位置核心页面位于 entry/src/main/ets/pages/Index.ets。Rehab Training Table ├── AppScope ├── entry │ └── src │ └── main │ ├── ets │ │ └── pages │ │ └── Index.ets │ └── module.json5 ├── hvigor └── oh-package.json52.2 页面入口结构EntryComponentstruct Index{build(){Column(){// 健康卡片与操作区}}}2.3 技术组成技术点作用价值ArkTS类型与业务逻辑组织健康数据ArkUI声明式 UI构建卡片界面State响应式状态驱动刷新Builder组件片段复用卡片样式Hvigor构建系统编译运行三、数据模型设计3.1 接口清单源码中的接口包括$iface。interfaceRehabItem{id:number;title?:string;name?:string;done?:boolean;note?:string;}接口字段对应页面中的卡片标题、动作状态、备注说明或健康指标。3.2 字段语义字段类型常见字段用途标识字段id列表 key标题字段itle、ame卡片主信息数值字段minutes、count、mileage统计或训练量状态字段done、offline、privacyLock控制交互表现文案字段message、ote、contact输出反馈3.3 建模价值健康和安全类应用关注的是“记录是否完整、动作是否完成、风险是否可见”。接口建模能让这些状态在页面中稳定表达。四、State 状态拆解4.1 状态清单源码中的状态包括$state。Staterecords:RehabItem[][];StatedraftText:string;Statemessage:string;Stateenabled:booleantrue;4.2 状态分类状态类别示例说明记录状态$primaryState保存动作或历史条目输入状态draft、ameDraft、symptomDraft接收文本数值状态useMinutes、screenHours、sittingMinutes健康指标开关状态eminderOn、privacyLock、offline控制功能模式反馈状态message、sleepNote、eport提示结果4.3 状态更新方式privateupdateItem(id:number):void{this.recordsthis.records.map((item:RehabItem){returnitem.idid?{...item,done:true}:item;});}五、核心方法解析5.1 方法清单源码中的核心方法包括$method。方法类型作用示例新增方法添加记录ddRecord、ddGear完成方法标记动作完成inish、doneAction统计方法计算数量或总量otal、doneCount反馈方法输出报告或消息exportReport卡片方法渲染列表项card5.2 新增记录privateaddRecord():void{consttextthis.draftText.trim();if(text.length0){return;}this.records[{id:Date.now(),title:text,done:false},...this.records];this.draftText;}5.3 完成动作privatefinish(id:number):void{this.recordsthis.records.map((item:RehabItem){returnitem.idid?{...item,done:true}:item;});}5.4 统计方法privatedoneCount():number{returnthis.records.filter((item:RehabItem)item.done).length;}六、Builder 卡片复用6.1 Builder 清单源码中的 Builder 组件包括$builder。Builderprivatecard(item:RehabItem){Column(){Text(item.title??item.name??记录).fontSize(16).fontWeight(FontWeight.Bold)}.padding(14).backgroundColor(#FFFFFF).borderRadius(8)}6.2 复用价值组件作用card统一记录卡片动作按钮承载完成或推进动作状态文案显示提示结果统计区域展示完成数量或总量6.3 边界控制Builder 只负责 UI不直接处理复杂状态逻辑。业务动作仍放在 private 方法里。七、页面布局结构7.1 常见布局Scroll(){Column(){// 标题区// 状态区// 操作区// 卡片列表}.padding(16)}7.2 信息分区区域内容价值标题区应用名称和说明明确使用场景状态区当前指标和提醒形成判断依据操作区输入框和按钮记录新数据列表区历史或动作卡片支持复盘反馈区消息和报告确认结果7.3 列表渲染ForEach(this.records,(item:RehabItem){this.card(item)},(item:RehabItem)item.id.toString())八、交互链路8.1 输入链路TextInput({text:this.draftText}).onChange((value:string){this.draftTextvalue;})8.2 按钮链路Button(记录).onClick((){this.addRecord();})8.3 反馈链路privatesetMessage(text:string):void{this.messagetext;}关键点输入、方法、状态、UI 四个环节要单向流动避免在 UI 片段中混入过多业务判断。九、健康与安全场景表达9.1 状态层级状态页面表达正常绿色或普通卡片需要关注橙色提示已完成完成文案或勾选状态隐私保护开关和锁定提示离线可用离线标识和联系人信息9.2 数据可信度健康记录要避免无效输入。实际扩展时应增加数字范围、必填字段和日期校验。9.3 反馈及时性用户完成动作后页面应立即改变卡片状态或消息文案减少不确定感。十、运行与调试10.1 DevEco Studio 运行# 打开项目目录# 同步依赖# 选择 entry 模块运行10.2 Hvigor 构建hvigorw clean hvigorw assembleHap10.3 调试点调试项判断标准状态变化点击后 State 是否更新卡片刷新列表是否重新渲染输入校验空值是否被拦截反馈文案消息是否更新构建输出HAP 是否正常生成十一、可维护性分析11.1 文件规模当前 Index.ets 约 65 行适合作为单页小工具示例。后续可以拆分卡片、输入区和统计区。11.2 状态收敛能计算的值不必单独保存避免源数据和统计结果不一致。privatetotalCount():number{returnthis.records.length;}11.3 可测试逻辑统计方法和状态转换方法可以单独抽离便于后续做单元测试。十二、扩展方向12.1 本地存储interfaceStoredHealthRecord{id:number;type:string;payload:string;updatedAt:number;}12.2 提醒通知护眼、疫苗、康复、装备保养都适合增加系统提醒。12.3 导出与分享康复训练、疫苗记录和血压类数据可以导出为就诊记录或家庭共享清单。十三、同类模板抽象13.1 数据模板interfaceActionItem{id:number;title:string;done:boolean;}13.2 状态模板Stateactions:ActionItem[][];Statemessage:string;13.3 卡片模板BuilderprivateactionCard(item:ActionItem){Row(){Text(item.title).layoutWeight(1)Text(item.done?已完成:待完成)}.padding(12)}十四、实现亮点14.1 数据模型明确Rehab Training Table 使用 $iface 组织业务对象保证列表卡片和操作方法有明确数据来源。14.2 状态链路短$state 直接驱动页面交互链路清晰调试成本低。14.3 组件结构稳定$builder 封装卡片或列表项保持页面风格一致。十五、总结Rehab Training Table 是一个典型的鸿蒙 ArkTS 健康与家庭安全类小工具。它通过 $iface 建模业务对象通过 $state 保存页面状态通过 $method 完成记录、统计、完成和反馈再通过 $builder 渲染可复用卡片。这类应用的重点是把小场景做闭环记录入口要明确状态反馈要及时历史信息要可复盘。掌握这个结构后可以继续扩展提醒、持久化、导出和多设备同步等能力。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是我持续创作的动力相关资源HarmonyOS DeveloperArkTS 语言基础ArkUI 声明式开发DevEco StudioStage 模型应用包结构HarmonyOS 应用开发指南