鸿蒙 ArkTS 实战BMI Trend Tracker 从BMI趋势记录到健康趋势应用完整解析前言BMI趋势记录 是一个典型的鸿蒙 ArkTS 单页工具应用。它围绕“通过身高、当前体重和上次体重计算 BMI并展示体重变化方向与变化公斤数。”这个真实需求把参数输入、业务公式、状态反馈和结果展示集中在一个页面中。本文直接基于 BMI Trend Tracker 的源码展开重点分析State 状态建模、Slider 参数输入、Toggle 开关状态、ForEach 列表渲染、方法封装公式和条件样式反馈。工具类页面最重要的是让用户知道输入从哪里来公式怎么算结果为什么可信。图示说明本文拆解的页面包含标题摘要区、核心结果区、参数控制区和业务说明区适合用来学习 ArkTS 声明式 UI 的数据流。一、项目场景1.1 业务目标通过身高、当前体重和上次体重计算 BMI并展示体重变化方向与变化公斤数。1.2 用户路径打开页面后先查看默认参数。通过滑杆、按钮、开关或列表调整输入。页面立刻根据状态重新计算结果。用户根据结果完成分摊、记录、估算或决策。1.3 技术目标目标页面体现ArkTS 实现参数输入金额、体重、页数、月份等Slider / Button状态保存当前数值、开关、阶段State业务公式均分、BMI、折旧、进度方法封装结果反馈大数字、提示、颜色Text / Stack / 条件样式二、页面入口2.1 组件骨架EntryComponentstruct Index{build(){Column(){Text(BMI趋势记录)}}}2.2 单页结构价值BMI趋势记录 的主要状态是 heightCm、weightKg、lastWeight。这些字段全部参与页面展示或公式计算集中在一个组件中能够让数据流保持足够直观。2.3 页面分区区域作用常见组件顶部标题和核心摘要Row、Text中部结果或列表Stack、Circle、ForEach底部参数和动作Slider、Button、Toggle三、状态建模3.1 State 字段字段类型说明heightCmnumber身高默认 170cmweightKgnumber当前体重默认 68kglastWeightnumber上次体重默认 70kg3.2 状态声明EntryComponentstruct Index{StateheightCm:number170;// 身高默认 170cmStateweightKg:number68;// 当前体重默认 68kgStatelastWeight:number70;// 上次体重默认 70kg}3.3 状态边界这些字段都贴近业务语义。数值字段用于计算布尔字段用于开关或模式字符串字段用于阶段展示索引字段用于列表选择。状态字段不是越多越好而是要刚好覆盖用户能够改变的内容。四、业务数据4.1 静态配置无数组字段页面围绕身高、当前体重和上次体重形成健康趋势记录4.2 ForEach 渲染ForEach(this.items,(item:string,index:number){Text(item).fontSize(16).fontWeight(FontWeight.Bold).onClick((){this.selectedindex})})4.3 选中态表达.backgroundColor(this.selectedindex?#0F766E:#FFFFFF).fontColor(this.selectedindex?#FFFFFF:#0F766E)通过索引把列表、详情和颜色绑定起来是小型工具页面保持简洁的关键。五、输入控件5.1 Slider 数值输入Slider 适合调节金额、人数、体重、页数、天数、温度、月份等连续或阶梯参数。Slider({value:this.value,min:0,max:100,step:1}).onChange((value:number){this.valueMath.round(value)})5.2 Toggle 开关Toggle 适合雨天、手气模式、开关模式等二值状态。Toggle({type:ToggleType.Switch,isOn:this.enabled}).onChange((on:boolean){this.enabledon})5.3 Button 动作Button 用于完成一项、重置、下一阶段、保存记录等离散动作。Button(执行).backgroundColor(#0F766E).onClick((){this.count1})六、交互行为6.1 动作列表Slider 调整 heightCmSlider 调整 weightKgSlider 调整 lastWeightbmi 方法计算 BMI圆形区域展示上升或下降趋势6.2 关键源码bmi():number{leth:numberthis.heightCm/100returnMath.round(this.weightKg/(h*h)*10)/10}6.3 反馈闭环Slider 调整 heightCmSlider 调整 weightKgSlider 调整 lastWeightbmi 方法计算 BMI圆形区域展示上升或下降趋势这些动作共同形成一个闭环用户改变输入状态字段更新公式重新计算界面立刻反馈结果。七、公式解析7.1 核心公式bmiround(weightKg/((heightCm/100)*(heightCm/100))*10)/107.2 方法封装当公式涉及多步计算、条件分支或循环时封装成方法能让 build 方法更干净。privatecalc():number{returnMath.round(1)}7.3 结果渲染Text(结果String(value)).fontSize(40).fontWeight(FontWeight.Bold).fontColor(#0F766E)结果旁边要保留单位例如元、kg、ml、页、天、周、mmHg 或月避免用户误读。八、视觉设计8.1 大数字呈现BMI趋势记录 的结果区域适合使用大数字让用户在第一眼就看到当前计算值。8.2 图形容器Stack、Circle、Rect 可以强化仪表盘感。Stack(){Circle().width(200).height(200).fill(#F8FAFC)Text(核心结果)}8.3 条件颜色.fontColor(this.warning?#DC2626:#0F766E)8.4 文案提示Text(this.done?已完成:待处理)条件文案能把公式结果翻译成用户更容易理解的状态。九、布局策略9.1 左右结构左右结构适合左侧展示核心结果右侧展示参数控制。9.2 上下结构上下结构适合先看标题和结果再逐项调整参数。9.3 信息层级层级内容目的一级核心结果快速判断二级当前参数明确来源三级说明文案解释规则十、调试路径10.1 手动验证检查默认状态是否与源码一致。调整每个 Slider、Toggle 或 Button。确认公式结果即时刷新。测试边界值和分支逻辑。10.2 日志辅助Button(调试).onClick((){console.info(state changed)})10.3 问题定位问题原因处理方式结果不变状态没有写回检查 onChange数字异常公式边界不完整增加取整或限制文案错误条件分支顺序不对单独验证条件列表错位index 映射错误对齐数组顺序十一、工程扩展11.1 历史记录可以保存每次分摊、记录、计算或估值结果方便后续复盘。interfaceHistoryItem{title:stringinput:stringresult:stringcreatedAt:string}11.2 本地缓存工具类页面常会重复使用同一组参数把最近一次状态保存下来可以提升效率。11.3 分享结果{tool:BMI趋势记录,state:heightCm、weightKg、lastWeight,result:calculated}十二、体验优化12.1 单位清晰金额、百分比、公斤、毫升、页数、天数、周数、血压和月份都要紧跟结果展示。12.2 范围合理Slider 的最小值、最大值和步长要贴近真实场景过宽会降低调整效率。12.3 反馈直接输入变化后结果应立即刷新用户不需要额外点击提交才能看到计算结果。十三、完整片段13.1 状态骨架EntryComponentstruct Index{StateheightCm:number170;// 身高默认 170cmStateweightKg:number68;// 当前体重默认 68kgStatelastWeight:number70;// 上次体重默认 70kg}13.2 数据配置// 无数组字段页面围绕身高、当前体重和上次体重形成健康趋势记录privateprimaryColor:string#0F766E13.3 交互代码bmi():number{leth:numberthis.heightCm/100returnMath.round(this.weightKg/(h*h)*10)/10}13.4 样式代码Text(核心结果).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#0F766E)十四、复用价值14.1 状态复用number 用于金额、体重、时间、页数和月份。boolean 用于模式开关和条件判断。string 用于阶段状态。数组用于 SKU、数量和固定选项。14.2 公式复用BMI趋势记录 的公式写法可以迁移到更多分摊、估算、统计、进度和记录页面。14.3 组件复用结果卡片、参数滑杆、列表项、状态标签和说明文案都可以抽成通用组件。十五、发布级拆解15.1 场景先行文章开头先说清楚 BMI趋势记录 解决什么问题再进入 ArkTS 代码读者更容易理解公式意义。15.2 状态为线索围绕 heightCm、weightKg、lastWeight 展开讲解可以把页面输入、计算和结果串起来。15.3 公式落地公式bmi round(weightKg / ((heightCm / 100) * (heightCm / 100)) * 10) / 10是本项目的核心技术点应同时解释输入来源、计算过程和输出展示。15.4 边界意识工具页要关注极值、开关变化、数组索引、除法取整和状态推进避免参数变化后出现异常结果。十六、总结BMI Trend Tracker 用简洁的 ArkTS 页面完成了 健康趋势 场景。它围绕 heightCm、weightKg、lastWeight 建模结合 无数组字段页面围绕身高、当前体重和上次体重形成健康趋势记录 组织输入并通过bmi round(weightKg / ((heightCm / 100) * (heightCm / 100)) * 10) / 10把业务规则转换成即时可见的结果。这类鸿蒙小工具的关键在于状态清楚、公式透明、反馈及时、边界稳定。理解这个项目后再开发小费分摊、健康趋势、仓储清单、冲煮计时、天气建议、红包分配、阅读进度、孕周估算、血压记录或资产折旧页面都会更顺手。相关资源HarmonyOS 开发者官网ArkTS 语言指南ArkUI 开发框架