羽球场边工具 HarmonyOS 元服务实战（03）：轻量计分页的状态机

发布时间：2026/7/31 11:59:04

羽球场边工具 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 执行一次撤销开始。比分在零分处停住把两边打成平分时结束按钮给出继续提示再让其中一边领先后结束最新结果会出现在最近结束区域。当用户重复点击、修改输入或离开后再回来时结果应当来自已定义的状态和规则而不是依赖某一次组件渲染的偶然顺序。操作阶段应观察的字段通过条件初始化默认状态与输入不遗留上一轮结果主动作主题相关值变化与规则一致回读结果或提示可继续操作风险防护点处理结果重复动作单一状态入口不生成旁路数据无效输入条件分支返回明确提示页面重进受控恢复状态可解释状态变化应可复盘结果应可解释并且能在下一次操作时继续被用户使用。每一次状态迁移都应保留足够的业务语义用户能看懂当前结果维护者能从输入、规则和结果之间还原处理过程。把边界条件写成明确分支能够避免异常发生时把旧结果误当成新结果也让后续扩展不必回到页面里寻找隐式判断。

相关新闻

计算机毕业设计之基于springboot+vue框架的在线答题系统

计算机毕业设计之基于springboot+vue框架的在线答题系统

随着新世纪无纸化办公方式的普及，自动化信息处理和基于网络的信息交互方式已被广泛应用。现在很多行业基本上都是交由计算机进行管理和测试，网络与计算机已成为整个线上管理体系中的重要组成部分。虽然信息技术广泛应用和数据存取更加方便，但…

2026/7/31 11:59:04 阅读更多 →
深度测评｜沈阳越想微智：以硬核技术重塑小程序定制行业标杆

深度测评｜沈阳越想微智：以硬核技术重塑小程序定制行业标杆

当前小程序定制行业普遍存在模板化套用、功能同质化、技术浅层化、落地效果薄弱等乱象，多数服务商依赖开源模板套壳开发，难以适配企业个性化业务场景，导致数字化建设流于形式、投入与价值严重不匹配。本次测评从技术体系、团队架构、AI落地能…

2026/7/31 11:58:04 阅读更多 →
省考行测判断推理：图形、定义、类比、逻辑四大题型核心解题框架与实战技巧

省考行测判断推理：图形、定义、类比、逻辑四大题型核心解题框架与实战技巧

1. 项目概述：一份能让你“开窍”的省考判断推理笔记 如果你正在准备省考，尤其是行测部分，那么判断推理这个模块，大概率是你又爱又恨的存在。爱它，是因为它逻辑性强，规律相对固定，掌握了方法提分…

2026/7/31 11:58:04 阅读更多 →

最新新闻

java freeswitch 留言功能

java freeswitch 留言功能

java freeswitch 留言功能 freeswitch 自带的voicemail 虽然可以实现留言功能，但是对于freeswitch不是很精通的人来说会比较麻烦，现在我介绍的是如何绕过voicemain 使用java和freeswitch的录音功能来实现留言 正文 java和freeswitch的录音功能来实现留言…

2026/7/31 12:41:18 阅读更多 →
185、NPU的编译器开发：模糊测试与安全审计

185、NPU的编译器开发：模糊测试与安全审计

185、NPU的编译器开发：模糊测试与安全审计 上周五晚上十一点，我盯着屏幕上一条诡异的NPU编译错误发呆。模型编译通过，仿真跑起来也没问题，但一上板子，推理结果每隔几十次就蹦出一个NaN。更邪门的是，这个NaN只在特定输入尺寸下出现，换个batch size就消失了。直觉告诉我，…

2026/7/31 12:41:18 阅读更多 →
若依框架深度解析：从企业级脚手架到二次开发实战指南

若依框架深度解析：从企业级脚手架到二次开发实战指南

1. 从零开始：为什么若依框架能成为企业级项目的“脚手架之王”？如果你是一名Java后端开发者，或者正在负责一个中小型管理系统的搭建，那么“若依”这个名字你一定不陌生。它不是一个新潮的AI框架，也不是一个颠覆性的技术…

2026/7/31 12:41:18 阅读更多 →
Linux系统下从源码编译安装Python的完整指南与优化实践

Linux系统下从源码编译安装Python的完整指南与优化实践

1. 项目概述：为什么要在Linux上从源码编译Python？ 很多刚接触Linux的朋友，可能会觉得直接用系统包管理器（比如 apt 、 yum ）安装Python是最省事的选择。一键安装，版本也是系统维护者测试过的&#xff0…

2026/7/31 12:41:18 阅读更多 →
零基础网络安全入门：从CIA三元组到OWASP Top 10实战

零基础网络安全入门：从CIA三元组到OWASP Top 10实战

在数字化进程不断加速的今天，网络安全已经从少数专业人士关注的领域，转变为每一个与技术相关的从业者都需要具备的基础素养。无论是开发一个 Web 应用、运维一套云上系统，还是保障智能汽车的数据安全，对潜在威胁的识别和防御能力都…

2026/7/31 12:41:18 阅读更多 →
Android 7.1模拟器安装Xposed框架实战：从环境搭建到故障排查

Android 7.1模拟器安装Xposed框架实战：从环境搭建到故障排查

1. 项目背景与核心挑战最近在折腾一个老项目的逆向分析，目标应用只兼容Android 7.1（API 25）及以上版本，并且是64位的。为了动态调试和功能修改，Xposed框架是绕不开的神器。但问题来了：我手头没有真机&#…

2026/7/31 12:40:18 阅读更多 →

日新闻

物理复制比逻辑复制好在哪？数据库复制原理详解

物理复制比逻辑复制好在哪？数据库复制原理详解

数据库复制是把主库数据同步到备库的机制，分为逻辑复制和物理复制两种。逻辑复制传输的是 SQL 语句或行变更事件，物理复制传输的是存储引擎底层的物理日志。阿里云 PolarDB（云原生数据库）采用物理复制，在同步延迟、数据…

2026/7/31 0:00:34 阅读更多 →
BilibiliDown：3分钟学会B站视频下载的终极指南

BilibiliDown：3分钟学会B站视频下载的终极指南

BilibiliDown：3分钟学会B站视频下载的终极指南 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.com/gh_mirrors/bi/Bilib…

2026/7/31 0:00:34 阅读更多 →
有哪些游戏数据AI平台？游戏行业Data+AI融合方案盘点

有哪些游戏数据AI平台？游戏行业Data+AI融合方案盘点

当前，游戏行业的“DataAI融合”已从概念验证进入价值落地阶段。根据IDC 2025年数据，中国AI游戏云市场规模已达18.6亿元；同时，游戏研发环节AI渗透率高达86%，生成式AI内容普及率超过50%。面对庞大的市场，游戏…

2026/7/31 0:00:34 阅读更多 →

周新闻

深度学习道路桥梁裂缝检测系统 道路桥梁裂缝检测数据集 道路桥梁病害识别检测数据集

深度学习道路桥梁裂缝检测系统 道路桥梁裂缝检测数据集 道路桥梁病害识别检测数据集

深度学习道路桥梁裂缝检测系统 数据集6000张 完整源码已标注数据集训练好的模型环境配置教程程序运行说明文档，可以直接使用！系统支持图片、视频、摄像头等多种方式检测裂缝，功能强大实用。 1数据集6000张 8各类别

2026/7/31 1:03:03 阅读更多 →
深度学习YOLO模型如何训练 PUBG 绝地求生目标检测数据集

深度学习YOLO模型如何训练 PUBG 绝地求生目标检测数据集

pubg数据集 精选原图1.42万数据 1.49万标签 无任何重复、算法增强或冗余图像！ pubg绝地求生目标检测数据集 1分类：e_body，14905个标签，txt格式 共计14244张图，99%为640*640尺寸图像 适合yolo目标检测、AI训练关键词&am…

2026/7/29 14:34:28 阅读更多 →
Apex英雄目标检测数据集 深度学习框架YOLO如何训练APEX数据集

Apex英雄目标检测数据集 深度学习框架YOLO如何训练APEX数据集

Apex检测数据集数据集详情检测类别： allies enemy tag图片总量：7247张训练集：5139张验证集：1425张测试集：683张标注状态：全部已标注，即拿即用数据格式：支持YOLO格式及其他格式&#…

2026/7/31 4:19:39 阅读更多 →

月新闻