羽球场边工具 HarmonyOS 元服务实战（03）：轻量计分页的状态机
比分不是两个孤立数字
场边计分最怕的不是按钮少，而是误触后的状态没有出处。页面把双方分数、队名、已结束记录和结果提示放在同一处管理：加分与撤销都经过同一个入口，因此分数不会被减到负数。
分数相同并不代表一场比赛已经有结果。结束动作先判断平分，再决定是否生成记录；这让“继续打一会儿”的提示成为一个明确的业务分支，而不是在列表里留下没有胜者的半成品。
用不可为负的变更函数处理误触
addScore(team: string, delta: number): void {
if (team === 'A') {
this.scoreA = Math.max(0, this.scoreA + delta);
} else {
this.scoreB = Math.max(0, this.scoreB + delta);
}
}
记录创建时保留双方队名、比分、赛制、胜者和结束时刻。这里保存的是结论快照，不是对界面文本的复制；队名随后被修改，也不会反向改变已经结束的比赛。
结束动作只在胜负成立时写入记录
if (this.scoreA === this.scoreB) {
this.finishedText = '比分相同，继续打一会儿再结束。';
return;
}
const winner = this.scoreA > this.scoreB ? this.playerA : this.playerB;
最近记录采用前插并截断为五条。场边工具的目标是快速确认刚结束的结果，而不是承担完整赛季档案；固定窗口能限制页面渲染量，也让最新一场始终靠近操作区。
最近五场为何采用前插截断
| 关注点 | 处理方式 | 可观察结果 |
|---|---|---|
| 比分不是两个孤立数字 | 场边计分最怕的不是按钮少，而是误触后的状态没有出处。页面把双 | 状态不依赖页面文案 |
| 结束动作只在胜负成立时写入记录 | 记录创建时保留双方队名、比分、赛制、胜者和结束时刻。这里保存 | 分支可回读 |
| 从平分到获胜的可观察结果 | 实际操作可以从 A 队连续加分、对 A 执行一次撤销开始。比 | 操作结果可核对 |
实际操作可以从 A 队连续加分、对 A 执行一次撤销开始。比分在零分处停住；把两边打成平分时，结束按钮给出继续提示；再让其中一边领先后结束，最新结果会出现在最近结束区域。
从平分到获胜的可观察结果
next.unshift({
id: `score_${Date.now()}`,
playerA: { name: this.playerA, score: this.scoreA },
playerB: { name: this.playerB, score: this.scoreB },
scoringSystem: '21', winner, finishedAt: Date.now()
});
场边计分最怕的不是按钮少，而是误触后的状态没有出处。页面把双方分数、队名、已结束记录和结果提示放在同一处管理：加分与撤销都经过同一个入口，因此分数不会被减到负数。
最近记录采用前插并截断为五条。场边工具的目标是快速确认刚结束的结果，而不是承担完整赛季档案；固定窗口能限制页面渲染量，也让最新一场始终靠近操作区。
撤销、重置与结束的边界
this.history = next.slice(0, 5);
this.finishedText = `${winner} 获胜`;
// 页面只显示最近的、已经结束的比赛
// 平分局不会进入历史列表
实际操作可以从 A 队连续加分、对 A 执行一次撤销开始。比分在零分处停住；把两边打成平分时，结束按钮给出继续提示；再让其中一边领先后结束，最新结果会出现在最近结束区域。
分数相同并不代表一场比赛已经有结果。结束动作先判断平分，再决定是否生成记录；这让“继续打一会儿”的提示成为一个明确的业务分支，而不是在列表里留下没有胜者的半成品。
关键实现片段
import { router } from '@kit.ArkUI';
import { ScoreMatch } from '../common/Models';
import { AppColors, AppSizes, AppText } from '../common/Theme';
@Component
@Entry
struct QuickScoringPage {
@State playerA: string = 'A队';
@State playerB: string = 'B队';
@State scoreA: number = 0;
@State scoreB: number = 0;
@State history: ScoreMatch[] = [];
@State finishedText: string = '';
addScore(team: string, delta: number): void {
if (team === 'A') {
this.scoreA = Math.max(0, this.scoreA + delta);
} else {
this.scoreB = Math.max(0, this.scoreB + delta);
}
}
reset(): void {
this.scoreA = 0;
this.scoreB = 0;
this.finishedText = '';
}
finish(): void {
if (this.scoreA === this.scoreB) {
this.finishedText = '比分相同，继续打一会儿再结束。';
return;
}
const winner = this.scoreA > this.scoreB ? this.playerA : this.playerB;
const next = this.history.slice();
next.unshift({
id: `score_${Date.now()}`,
playerA: { name: this.playerA, score: this.scoreA },
playerB: { name: this.playerB, score: this.scoreB },
scoringSystem: '21',
winner,
finishedAt: Date.now()
});
this.history = next.slice(0, 5);
this.finishedText = `${winner} 获胜`;
}
build() {
Column() {
Row() {
Text('‹')
.width(48)
.height(AppSizes.APP_BAR)
.fontSize(AppText.HEADING)
.fontColor(AppColors.WHITE)
.textAlign(TextAlign.Center)
.onClick(() => router.back());
Text('实时计分')
.fontSize(AppText.SUBTITLE)
.fontWeight(FontWeight.Bold)
.fontColor(AppColors.WHITE)
.textAlign(TextAlign.Center)
.layoutWeight(1);
Text('').width(48);
}
.height(AppSizes.APP_BAR)
.width('100%')
.backgroundColor(AppColors.BRAND);
Scroll() {
Column() {
Row() {
TextInput({ text: this.playerA, placeholder: 'A队' })
.height(AppSizes.BTN_HEIGHT)
.layoutWeight(1)
.onChange((value: string) => this.playerA = value);
TextInput({ text: this.playerB, placeholder: 'B队' })
.height(AppSizes.BTN_HEIGHT)
.layoutWeight(1)
.margin({ left: AppSizes.GAP_MD })
.onChange((value: string) => this.playerB = value);
}
.width('100%');
Row() {
Text(`${this.scoreA}`)
.fontSize(72)
.fontWeight(FontWeight.Bold)
.fontColor(this.scoreA >= this.scoreB ? AppColors.BRAND : AppColors.TEXT_SECONDARY)
.layoutWeight(1)
.textAlign(TextAlign.Center);
Text(':')
.fontSize(AppText.HEADING)
.fontWeight(FontWeight.Bold)
.fontColor(AppColors.TEXT_MUTED);
Text(`${this.scoreB}`)
.fontSize(72)
.fontWeight(FontWeight.Bold)
.fontColor(this.scoreB >= this.scoreA ? AppColors.ACCENT : AppColors.TEXT_SECONDARY)
.layoutWeight(1)
.textAlign(TextAlign.Center);
}
.width('100%')
.padding({ top: AppSizes.GAP_XL, bottom: AppSizes.GAP_XL });
Row() {
Button('+1')
.layoutWeight(1)
.height(64)
.fontSize(AppText.TITLE)
.backgroundColor(AppColors.BRAND)
.fontColor(AppColors.WHITE)
.borderRadius(AppSizes.RADIUS_MD)
.onClick(() => this.addScore('A', 1));
Button('+1')
.layoutWeight(1)
.height(64)
.fontSize(AppText.TITLE)
.backgroundColor(AppColors.ACCENT)
.fontColor(AppColors.WHITE)
.borderRadius(AppSizes.RADIUS_MD)
.margin({ left: AppSizes.GAP_MD })
.onClick(() => this.addScore('B', 1));
}
.width('100%');
Row() {
Button('A撤销')
.layoutWeight(1)
.height(AppSizes.BTN_HEIGHT)
.backgroundColor(AppColors.INPUT)
.fontColor(AppColors.TEXT_PRIMARY)
.onClick(() => this.addScore('A', -1));
Button('重置')
.layoutWeight(1)
.height(AppSizes.BTN_HEIGHT)
.backgroundColor(AppColors.INPUT)
.fontColor(AppColors.TEXT_PRIMARY)
.margin({ left: AppSizes.GAP_SM, right: AppSizes.GAP_SM })
.onClick(() => this.reset());
Button('B撤销')
.layoutWeight(1)
.height(AppSizes.BTN_HEIGHT)
.backgroundColor(AppColors.INPUT)
.fontColor(AppColors.TEXT_PRIMARY)
.onClick(() => this.addScore('B', -1));
}
.width('100%')
.margin({ top: AppSizes.GAP_MD });
Button('结束比赛')
.width('100%')
.height(AppSizes.BTN_HEIGHT)
.backgroundColor(AppColors.SUCCESS)
.fontColor(AppColors.WHITE)
.borderRadius(AppSizes.RADIUS_MD)
.margin({ top: AppSizes.GAP_LG })
.onClick(() => this.finish());
if (this.finishedText.length > 0) {
Text(this.finishedText)
.fontSize(AppText.BODY)
.fontColor(AppColors.BRAND)
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Center)
.width('100%')
.margin({ top: AppSizes.GAP_MD });
}
if (this.history.length > 0) {
Column() {
Text('最近结束')
.fontSize(AppText.TITLE)
.fontWeight(FontWeight.Bold)
.fontColor(AppColors.TEXT_PRIMARY)
用不可为负的变更函数处理误触、结束动作只在胜负成立时写入记录与最近五场为何采用前插截断共同约束了这条处理链：输入先被归类，计算或异步调用只在定义的入口发生，页面随后读取一个明确的结果。把这些判断分散在按钮回调里会让一次重进、一次重复点击或一次失败返回都变成难以定位的差异。
从平分到获胜的可观察结果不是事后补上的提示，而是模型在边界条件下仍然要给出的答案。用户只需要看到可继续的操作，模块内部则保留足够的状态来解释为什么当前结果是这样。
实施取舍
记录创建时保留双方队名、比分、赛制、胜者和结束时刻。这里保存的是结论快照，不是对界面文本的复制；队名随后被修改，也不会反向改变已经结束的比赛。
实际操作可以从 A 队连续加分、对 A 执行一次撤销开始。比分在零分处停住；把两边打成平分时，结束按钮给出继续提示；再让其中一边领先后结束，最新结果会出现在最近结束区域。
比分不是两个孤立数字所对应的数据不应依赖临时文本或视图顺序。将事实保留为字段、记录或令牌，能够让同一动作在再次进入页面后得到一致的解释，也为后续把能力收敛为轻量组件留下稳定边界。
操作验证
实际操作可以从 A 队连续加分、对 A 执行一次撤销开始。比分在零分处停住；把两边打成平分时，结束按钮给出继续提示；再让其中一边领先后结束，最新结果会出现在最近结束区域。
在验证过程中，先观察初始状态，再执行唯一的主题动作，最后回读结果区或系统状态。若输入不满足条件，页面应给出可理解的分支；若条件恢复，用户可以从当前页面再次发起操作，而不需要退出并重新建立上下文。
更多系统能力可参考 HarmonyOS 开发者文档。
规则落到界面之前
比分不是两个孤立数字不是展示层的装饰语，而是决定输入如何进入状态、状态如何产生结果的约束。场边计分最怕的不是按钮少，而是误触后的状态没有出处。页面把双方分数、队名、已结束记录和结果提示放在同一处管理：加分与撤销都经过同一个入口，因此分数不会被减到负数。
结束动作只在胜负成立时写入记录需要把可复算的数据留在模型里：记录创建时保留双方队名、比分、赛制、胜者和结束时刻。这里保存的是结论快照，不是对界面文本的复制；队名随后被修改，也不会反向改变已经结束的比赛。
从平分到获胜的可观察结果要求页面把正常路径与异常路径放到同一个可观察范围中。实际操作可以从 A 队连续加分、对 A 执行一次撤销开始。比分在零分处停住；把两边打成平分时，结束按钮给出继续提示；再让其中一边领先后结束，最新结果会出现在最近结束区域。
当用户重复点击、修改输入或离开后再回来时，结果应当来自已定义的状态和规则，而不是依赖某一次组件渲染的偶然顺序。
| 操作阶段 | 应观察的字段 | 通过条件 |
|---|---|---|
| 初始化 | 默认状态与输入 | 不遗留上一轮结果 |
| 主动作 | 主题相关值 | 变化与规则一致 |
| 回读 | 结果或提示 | 可继续操作 |
| 风险 | 防护点 | 处理结果 |
|---|---|---|
| 重复动作 | 单一状态入口 | 不生成旁路数据 |
| 无效输入 | 条件分支 | 返回明确提示 |
| 页面重进 | 受控恢复 | 状态可解释 |
状态变化应可复盘，结果应可解释，并且能在下一次操作时继续被用户使用。每一次状态迁移都应保留足够的业务语义：用户能看懂当前结果，维护者能从输入、规则和结果之间还原处理过程。把边界条件写成明确分支，能够避免异常发生时把旧结果误当成新结果，也让后续扩展不必回到页面里寻找隐式判断。
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
0
0- 0
已为社区贡献158条内容
所有评论(0)