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