企业官网建设流程全解析

鸿蒙 ArkTS 实战：Running Pace Calculator 从跑步配速计算到运动数据应用完整解析

前言

跑步配速计算 是一个典型的鸿蒙 ArkTS 轻量工具页面。它围绕“输入跑步距离和总用时，换算每公里配速，并与目标时间比较。”这个明确需求，把参数输入、状态变化、公式计算和结果反馈放在同一屏中。

本文基于 Running Pace Calculator 的真实源码展开，重点分析@State 状态建模、Slider 数值输入、ForEach 列表渲染、Toggle 开关状态、方法封装公式和条件样式反馈。

小工具页面的核心不是功能堆叠，而是让每一次输入都能立刻转成可理解的结果。

图示说明：页面由标题摘要、参数输入、结果展示、操作反馈四部分构成，适合学习 ArkTS 声明式 UI 的状态流。

一、项目场景

1.1 业务目标

输入跑步距离和总用时，换算每公里配速，并与目标时间比较。

1.2 用户路径

1. 查看默认参数和当前结果。
2. 通过滑杆、列表、按钮或开关调整输入。
3. 页面自动刷新估算值、合计值或状态文案。
4. 根据结果完成记录、判断或后续操作。

1.3 技术目标

二、入口结构

2.1 组件骨架

@Entry@Componentstruct Index{build(){Column(){Text('跑步配速计算')}}}

2.2 单页结构价值

跑步配速计算 的主要状态是 distanceKm、totalMin、targetMin。这些字段集中在一个组件里，便于理解输入、计算和输出之间的关系。

2.3 页面分区

三、状态建模

3.1 State 字段

3.2 状态声明

@Entry@Componentstruct Index{@StatedistanceKm:number=5;// 跑步距离，默认 5km@StatetotalMin:number=32;// 总用时，默认 32 分钟@StatetargetMin:number=30;// 目标时间，默认 30 分钟}

3.3 状态边界

这些字段都直接参与界面刷新。数值字段用于公式，布尔字段用于开关或完成状态，索引字段用于列表选择。

状态字段越贴近业务语言，页面越容易维护。

四、业务数据

4.1 静态配置

无数组字段：页面围绕距离、用时和目标完成配速计算

4.2 列表渲染

ForEach(this.items,(item:string,index:number)=>{Text(item).fontSize(16).fontWeight(FontWeight.Bold).onClick(()=>{this.selected=index})})

4.3 选中态

.backgroundColor(this.selected===index?'#2563EB':'#FFFFFF').fontColor(this.selected===index?'#FFFFFF':'#2563EB')

这种写法让数据、状态和视觉反馈保持一致。

五、输入控件

5.1 Slider 数值输入

Slider 适合调节身高、重量、比例、金额、面积、时长等范围型参数。

Slider({value:this.value,min:0,max:100,step:1}).onChange((value:number)=>{this.value=Math.round(value)})

5.2 Toggle 开关

Toggle 用于性别、加急、续费、完成等二值状态。

Toggle({type:ToggleType.Switch,isOn:this.enabled}).onChange((on:boolean)=>{this.enabled=on})

5.3 Button 操作

Button 用于打卡、重置、切换、追加等明确动作。

Button('执行').backgroundColor('#2563EB').onClick(()=>{this.count+=1})

六、交互行为

6.1 动作列表

1. Slider 调整 distanceKm 和 totalMin
2. paceSec 方法换算秒/公里
3. paceText 方法格式化配速
4. 根据 totalMin 与 targetMin 输出目标提示

6.2 关键源码

paceText(sec:number):string{letm:number=Math.floor(sec/60)lets:number=sec%60returnString(m)+'\''+(s<10?'0':'')+String(s)+'"'}

6.3 反馈闭环

• Slider 调整 distanceKm 和 totalMin
• paceSec 方法换算秒/公里
• paceText 方法格式化配速
• 根据 totalMin 与 targetMin 输出目标提示

这些行为共同组成一个闭环：用户输入改变状态，状态触发计算，计算结果回到页面。

七、公式解析

7.1 核心公式

paceSec=round(totalMin*60/distanceKm)

7.2 方法封装

当公式超过一行时，用方法封装更清楚：

privatecalc():number{returnMath.round(1)}

7.3 结果渲染

Text('结果：'+String(value)).fontSize(40).fontWeight(FontWeight.Bold).fontColor('#2563EB')

八、视觉设计

8.1 大数字

工具类页面应突出结果，比如百分比、克数、总重量、报价、配速或连续天数。

8.2 图形容器

Stack、Circle、Rect 能让结果区更聚焦。

Stack(){Circle().width(200).height(200).fill('#F8FAFC')Text('核心结果')}

8.3 条件颜色

.fontColor(this.warning?'#DC2626':'#2563EB')

8.4 文案提示

Text(this.done?'已完成':'待处理')

九、布局策略

9.1 上下结构

上下结构适合先看结果，再调整参数。

9.2 左右结构

左右结构适合左侧展示大结果，右侧展示参数列表。

9.3 信息层级

十、调试路径

10.1 手动验证

1. 检查默认状态是否符合源码。
2. 调整每个输入控件。
3. 确认结果随状态刷新。
4. 测试边界值和切换逻辑。

10.2 日志辅助

Button('调试').onClick(()=>{console.info('state changed')})

10.3 问题定位

十一、工程扩展

11.1 历史记录

可以保存每次计算结果，方便对比。

interfaceHistoryItem{title:stringinput:stringresult:stringcreatedAt:string}

11.2 本地缓存

用户经常重复使用同一组参数，可以保存到本地。

11.3 分享结果

估算类结果可以导出为文本或图片。

{"tool":"跑步配速计算","state":"distanceKm、totalMin、targetMin","result":"calculated"}

十二、体验优化

12.1 单位清晰

厘米、克、千克、毫升、分钟、平方米、像素等单位必须出现在结果旁边。

12.2 范围合理

Slider 的 min、max、step 要贴合真实场景。

12.3 反馈直接

输入改变后不要等待提交，结果应该实时刷新。

十三、完整片段

13.1 状态骨架

@Entry@Componentstruct Index{@StatedistanceKm:number=5;// 跑步距离，默认 5km@StatetotalMin:number=32;// 总用时，默认 32 分钟@StatetargetMin:number=30;// 目标时间，默认 30 分钟}

13.2 数据配置

// 无数组字段：页面围绕距离、用时和目标完成配速计算privateprimaryColor:string='#2563EB'

13.3 交互代码

paceText(sec:number):string{letm:number=Math.floor(sec/60)lets:number=sec%60returnString(m)+'\''+(s<10?'0':'')+String(s)+'"'}

13.4 样式代码

Text('核心结果').fontSize(28).fontWeight(FontWeight.Bold).fontColor('#2563EB')

十四、复用价值

14.1 状态复用

• number 用于数值参数和索引。
• boolean 用于开关和完成状态。
• string[] 与 number[] 用于业务配置。

14.2 公式复用

跑步配速计算 的公式写法可以迁移到更多估算、换算、记录和计划页面。

14.3 组件复用

结果卡片、参数滑杆、选择标签和说明文案都可以抽成通用组件。

十五、发布级拆解

15.1 场景先行

文章开头先说清楚 跑步配速计算 解决什么问题，再进入 ArkTS 代码，读者更容易理解公式的意义。

15.2 状态为线索

围绕 distanceKm、totalMin、targetMin 展开讲解，可以把页面的输入、计算和结果串起来。

15.3 公式落地

公式paceSec = round(totalMin * 60 / distanceKm)是本项目最核心的技术点，应同时解释输入来源、计算过程和输出展示。

15.6 结果可信度

跑步配速计算 的结果来自明确状态和公式，页面展示时应让输入、计算和输出保持同屏可见，读者才能判断结果是否可信。

十六、总结

Running Pace Calculator 用简洁的 ArkTS 页面完成了 运动数据 场景。它围绕 distanceKm、totalMin、targetMin 建模，结合 无数组字段：页面围绕距离、用时和目标完成配速计算 组织输入，并通过paceSec = round(totalMin * 60 / distanceKm)把业务规则转换成即时可见的结果。

这类鸿蒙小工具的关键在于：状态清楚、公式透明、反馈及时、边界稳定。理解这个项目后，再开发健康估算、配方换算、材料估算、尺寸裁剪、习惯记录等页面都会更顺手。

相关资源：

• HarmonyOS 开发者官网
• ArkTS 语言指南
• ArkUI 开发框架