鸿蒙 ArkTS 实战：Course GPA Calculator 从课程绩点计算到成绩统计应用完整解析

前言

课程绩点计算 是一个典型的鸿蒙 ArkTS 轻量工具页面。它围绕“维护三门课程成绩，按绩点规则换算后计算平均 GPA，适合学期成绩整理。”这个明确需求，把参数输入、公式计算、状态反馈和结果展示集中在一个页面中。

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

小工具的体验重点不是功能堆叠，而是输入变化后结果能被立刻理解。

图示说明：页面由标题摘要、结果展示、参数控制和说明文案组成，适合学习 ArkTS 声明式 UI 的状态流。

一、项目场景

1.1 业务目标

维护三门课程成绩，按绩点规则换算后计算平均 GPA，适合学期成绩整理。

1.2 用户路径

1. 打开页面查看默认参数。
2. 通过滑杆、开关、按钮或标签调整输入。
3. 页面立即根据状态重新计算结果。
4. 用户根据结果完成判断、估算或计划。

1.3 技术目标

二、页面入口

2.1 组件骨架

@Entry@Componentstruct Index{build(){Column(){Text('课程绩点计算')}}}

2.2 单页结构价值

课程绩点计算 的核心状态是 score1、score2、score3、credit。这些字段都直接影响计算结果或展示文案，集中在一个组件里能让数据流保持清楚。

2.3 页面分区

三、状态建模

3.1 State 字段

3.2 状态声明

@Entry@Componentstruct Index{@Statescore1:number=88;// 课程A成绩，默认 88@Statescore2:number=92;// 课程B成绩，默认 92@Statescore3:number=76;// 课程C成绩，默认 76@Statecredit:number=3;// 学分，默认 3}

3.3 状态边界

这些字段都贴近用户能够改变的业务输入。数值字段用于计算，布尔字段用于模式切换，索引字段用于固定选项。

状态设计清楚，公式才容易解释；公式清楚，页面结果才可信。

四、业务数据

4.1 静态配置

课程列表：课程A、课程B、课程C

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?'#7C3AED':'#FFFFFF').fontColor(this.selected===index?'#FFFFFF':'#7C3AED')

列表项、结果区和参数区通过同一组状态连接，页面读起来就不会散。

五、输入控件

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 或 Text 标签适合处理保存、切换、完成、重置等离散动作。

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

六、交互行为

6.1 动作列表

1. ForEach 渲染课程列表
2. Slider 调整 score1
3. Slider 调整 score2
4. Slider 调整 score3
5. gpa 方法计算平均绩点

6.2 关键源码

point(score:number):number{returnscore>=90?4:score>=80?3:score>=70?2:score>=60?1:0}gpa():number{returnMath.round((this.point(this.score1)+this.point(this.score2)+this.point(this.score3))/3*10)/10}

6.3 反馈闭环

• ForEach 渲染课程列表
• Slider 调整 score1
• Slider 调整 score2
• Slider 调整 score3
• gpa 方法计算平均绩点

用户调整输入后，状态字段马上更新；状态更新后，公式和 UI 同步刷新。这就是声明式 UI 最直观的优势。

七、公式解析

7.1 核心公式

GPA=round((point(score1)+point(score2)+point(score3))/3*10)/10

7.2 方法封装

当公式包含边界处理、条件判断或多项合计时，封装为方法可以让 build 方法更清晰。

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

7.3 结果渲染

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

结果展示必须带单位，例如元、kg、ml、百分比、天、周、Mbps、cm 或 GPA。

八、视觉设计

8.1 大数字

课程绩点计算 的核心结果应该用大字号展示，让用户无需阅读大量说明就能看懂当前状态。

8.2 图形容器

Stack、Circle、Rect 可以强化仪表盘感。

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

8.3 条件颜色

.fontColor(this.warning?'#DC2626':'#7C3AED')

8.4 文案提示

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

好的文案会把数字结果转成用户能行动的提示。

九、布局策略

9.1 上下结构

上下结构适合先展示结果，再逐项调整参数。

9.2 左右结构

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

9.3 信息层级

十、调试路径

10.1 手动验证

1. 检查默认状态是否与源码一致。
2. 调整每个 Slider、Toggle 或标签。
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":"score1、score2、score3、credit","result":"calculated"}

十二、体验优化

12.1 单位清晰

金额、体积、心率、天数、温度、年龄、账期、高度、网速和成绩都要紧跟单位展示。

12.2 范围合理

Slider 的 min、max 和 step 要贴近真实使用场景，避免调整成本过高。

12.3 反馈直接

输入变化后结果必须立即刷新，工具页面不适合把结果藏在提交动作之后。

十三、完整片段

13.1 状态骨架

@Entry@Componentstruct Index{@Statescore1:number=88;// 课程A成绩，默认 88@Statescore2:number=92;// 课程B成绩，默认 92@Statescore3:number=76;// 课程C成绩，默认 76@Statecredit:number=3;// 学分，默认 3}

13.2 数据配置

// 课程列表：课程A、课程B、课程CprivateprimaryColor:string='#7C3AED'

13.3 交互代码

point(score:number):number{returnscore>=90?4:score>=80?3:score>=70?2:score>=60?1:0}gpa():number{returnMath.round((this.point(this.score1)+this.point(this.score2)+this.point(this.score3))/3*10)/10}

13.4 样式代码

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

十四、复用价值

14.1 状态复用

• number 用于金额、重量、比例、温度、速度和分数。
• boolean 用于模式开关和类型切换。
• number 索引用于训练区间、体型和课程等固定选项。

14.2 公式复用

课程绩点计算 的公式写法可以迁移到更多购物、物流、运动、排班、烘焙、宠物、财务、办公和学习工具页面。

14.3 组件复用

结果卡片、参数滑杆、状态标签、单位文案都可以抽成通用组件。

十五、发布级拆解

15.1 场景先行

文章开头先说清楚 课程绩点计算 解决什么问题，再进入 ArkTS 代码，读者更容易理解公式意义。

15.2 状态为线索

围绕 score1、score2、score3、credit 展开讲解，可以把页面输入、计算和结果串起来。

15.3 公式落地

公式GPA = round((point(score1)+point(score2)+point(score3))/3 * 10)/10是本项目的核心技术点，应同时解释输入来源、计算过程和输出展示。

十六、总结

Course GPA Calculator 用简洁的 ArkTS 页面完成了 成绩统计 场景。它围绕 score1、score2、score3、credit 建模，结合 课程列表：课程A、课程B、课程C 组织输入，并通过GPA = round((point(score1)+point(score2)+point(score3))/3 * 10)/10把业务规则转换成即时可见的结果。

这类鸿蒙小工具的关键在于：状态清楚、公式透明、反馈及时、边界稳定。理解这个项目后，再开发免运费购物车、体积重、心率区间、排班、烘焙温度、宠物年龄、账期回款、桌面人体工学、测速记录或 GPA 统计页面都会更顺手。

相关资源：

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