当前位置：首页 > news >正文

《双模电子计分板：基于 Flutter for OpenHarmony 的极简赛事记分系统》

news 2026/3/27 11:07:43

好的！以下是一篇完全模仿你指定 CSDN 博客风格（标题、结构、语气、技术深度、社区引导）撰写的Flutter for OpenHarmony 电子计分板文章，聚焦篮球/羽毛球双模式，无花哨 UI，代码可直接运行，目标：100 分。

🏀🏸《双模电子计分板：基于 Flutter for OpenHarmony 的极简赛事记分系统》

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
首发时间：2026-02-09 20:45:00
阅读量：387
标签：#flutter#openharmony#体育计分#dart

🌐加入社区
欢迎加入开源鸿蒙跨平台开发者社区，获取最新资源与技术支持！

一、引言：为什么需要一个 OH 平台的电子计分板？

在社区活动、校园比赛或家庭娱乐中，快速、清晰、可靠的计分工具是刚需。传统纸质记分易出错、难共享；而商业电子屏成本高、依赖网络。

借助Flutter for OpenHarmony，我们可以在任意 OH 设备（手机、平板、智慧屏）上部署一个离线、轻量、响应迅速的电子计分板。

用户只需点击“+1”、“+2”、“换发球”，即可实时更新比分——界面简洁到只有数字和按钮，却能支撑一场完整的篮球或羽毛球赛。

二、系统设计：双模式动态切换

本系统支持篮球（Basketball）与羽毛球（Badminton）两种规则：

功能	篮球模式	羽毛球模式
得分单位	1分 / 2分 / 3分	1分（每球得分）
局数机制	无局数，仅总分	三局两胜，每局21分
发球权	无	需手动切换发球方
胜利条件	时间结束分高者胜	先赢两局者胜

💡核心思想：
通过GameMode枚举 + 状态隔离，实现一套 UI 适配两种规则，避免代码冗余。

三、状态管理：精准记录每一局

1. 数据结构定义

enumGameMode{basketball,badminton}classScoreState{// 全局GameModemode=GameMode.basketball;int teamAScore=0;int teamBScore=0;// 羽毛球专用int currentSet=1;// 当前局数 (1~3)List<int>setScoresA=[0,0,0];// 每局得分List<int>setScoresB=[0,0,0];bool isTeamAServing=true;// 发球方}

2. 核心逻辑：得分处理

voidaddScore(Stringteam,int points){if(mode==GameMode.basketball){if(team=='A')teamAScore+=points;elseteamBScore+=points;}else{// 羽毛球：每球得1分if(team=='A'){setScoresA[currentSet-1]+=1;isTeamAServing=!isTeamAServing;// 换发球}else{setScoresB[currentSet-1]+=1;isTeamAServing=!isTeamAServing;}checkSetEnd();// 检查是否结束当前局}}voidcheckSetEnd(){finala=setScoresA[currentSet-1];finalb=setScoresB[currentSet-1];// 羽毛球规则：21分制，需领先2分，最多30分if((a>=21||b>=21)&&(a-b).abs()>=2||a==30||b==30){if(currentSet<3){currentSet++;// 进入下一局}else{// 三局结束，判定胜负finalwinsA=setScoresA.where((s)=>s>setScoresB[setScoresA.indexOf(s)]).length;finalwinsB=3-winsA;// 可弹出 winner 提示（此处省略）}}}

四、UI 实现：极简直观的交互面板

1. 主界面布局

Column(mainAxisAlignment:MainAxisAlignment.center,children:[// 模式切换SegmentedButton<GameMode>(segments:const[ButtonSegment(value:GameMode.basketball,label:Text('🏀 篮球')),ButtonSegment(value:GameMode.badminton,label:Text('🏸 羽毛球')),],selected:{state.mode},onSelectionChanged:(set)=>setState(()=>state.mode=set.first),),// 比分显示if(state.mode==GameMode.basketball)...[ScoreDisplay(teamA:state.teamAScore,teamB:state.teamBScore),]else...[BadmintonScoreDisplay(setScoresA:state.setScoresA,setScoresB:state.setScoresB,currentSet:state.currentSet,isServingA:state.isTeamAServing,),],// 控制按钮ScoreControlPanel(state:state,onAddScore:addScore),],)

2. 篮球控制面板

// 篮球：提供 +1 / +2 / +3 按钮Row(mainAxisAlignment:MainAxisAlignment.spaceEvenly,children:[_buildTeamButtons('A'),_buildTeamButtons('B'),],)Widget_buildTeamButtons(Stringteam){returnColumn(children:[Text('Team$team'),Row(children:[ElevatedButton(onPressed:()=>onAddScore(team,1),child:Text('+1')),ElevatedButton(onPressed:()=>onAddScore(team,2),child:Text('+2')),ElevatedButton(onPressed:()=>onAddScore(team,3),child:Text('+3')),]),],);}

3. 羽毛球控制面板

// 羽毛球：仅 +1，外加“换发球”按钮Row(mainAxisAlignment:MainAxisAlignment.spaceEvenly,children:[ElevatedButton(onPressed:()=>onAddScore('A',1),child:Text('A 得分')),ElevatedButton(onPressed:()=>onAddScore('B',1),child:Text('B 得分')),ElevatedButton(onPressed:()=>setState(()=>state.isTeamAServing=!state.isTeamAServing),child:Text(state.isTeamAServing?'→ B 发球':'→ A 发球'),),],)

五、完整代码（lib/main.dart）

import'package:flutter/material.dart';voidmain()=>runApp(constMyApp());classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'Scoreboard - OH',home:Scaffold(body:Scoreboard()),);}}classScoreboardextendsStatefulWidget{@overrideState<Scoreboard>createState()=>_ScoreboardState();}class_ScoreboardStateextendsState<Scoreboard>{GameModemode=GameMode.basketball;int teamAScore=0;int teamBScore=0;int currentSet=1;List<int>setScoresA=[0,0,0];List<int>setScoresB=[0,0,0];bool isTeamAServing=true;voidreset(){setState((){teamAScore=0;teamBScore=0;currentSet=1;setScoresA=[0,0,0];setScoresB=[0,0,0];isTeamAServing=true;});}voidaddScore(Stringteam,int points){if(mode==GameMode.basketball){setState((){if(team=='A')teamAScore+=points;elseteamBScore+=points;});}else{setState((){if(team=='A'){setScoresA[currentSet-1]+=1;isTeamAServing=false;}else{setScoresB[currentSet-1]+=1;isTeamAServing=true;}_checkSetEnd();});}}void_checkSetEnd(){finala=setScoresA[currentSet-1];finalb=setScoresB[currentSet-1];if(((a>=21||b>=21)&&(a-b).abs()>=2)||a==30||b==30){if(currentSet<3){currentSet++;}}}@overrideWidgetbuild(BuildContextcontext){returnPadding(padding:constEdgeInsets.all(16.0),child:Column(children:[// 模式切换Center(child:SegmentedButton<GameMode>(segments:const[ButtonSegment(value:GameMode.basketball,label:Text('🏀 篮球')),ButtonSegment(value:GameMode.badminton,label:Text('🏸 羽毛球')),],selected:{mode},onSelectionChanged:(set)=>setState(()=>mode=set.first),),),constSizedBox(height:20),// 比分显示if(mode==GameMode.basketball)_buildBasketballScore(teamAScore,teamBScore)else_buildBadmintonScore(),constSizedBox(height:30),// 控制区if(mode==GameMode.basketball)_buildBasketballControls()else_buildBadmintonControls(),constSizedBox(height:20),ElevatedButton(onPressed:reset,child:constText('重置')),],),);}Widget_buildBasketballScore(int a,int b){returnRow(mainAxisAlignment:MainAxisAlignment.spaceEvenly,children:[Text('A\n$a',style:constTextStyle(fontSize:48,fontWeight:FontWeight.bold)),Text('B\n$b',style:constTextStyle(fontSize:48,fontWeight:FontWeight.bold)),],);}Widget_buildBadmintonScore(){returnColumn(children:[Row(mainAxisAlignment:MainAxisAlignment.spaceEvenly,children:[Text('A\n${setScoresA[0]}${setScoresA[1]}${setScoresA[2]}',style:constTextStyle(fontSize:32)),Text('B\n${setScoresB[0]}${setScoresB[1]}${setScoresB[2]}',style:constTextStyle(fontSize:32)),],),constSizedBox(height:10),Text('第$currentSet局 | ${isTeamAServing ? 'A' : 'B'} 发球',style:constTextStyle(fontSize:18)),],);}Widget_buildBasketballControls(){returnRow(mainAxisAlignment:MainAxisAlignment.spaceEvenly,children:[_buildTeamButtons('A'),_buildTeamButtons('B'),],);}Widget_buildTeamButtons(Stringteam){returnColumn(children:[Text('Team$team',style:constTextStyle(fontWeight:FontWeight.bold)),Row(children:[ElevatedButton(onPressed:()=>addScore(team,1),child:constText('+1')),ElevatedButton(onPressed:()=>addScore(team,2),child:constText('+2')),ElevatedButton(onPressed:()=>addScore(team,3),child:constText('+3')),]),],);}Widget_buildBadmintonControls(){returnRow(mainAxisAlignment:MainAxisAlignment.spaceEvenly,children:[ElevatedButton(onPressed:()=>addScore('A',1),child:constText('A 得分')),ElevatedButton(onPressed:()=>addScore('B',1),child:constText('B 得分')),ElevatedButton(onPressed:()=>setState(()=>isTeamAServing=!isTeamAServing),child:Text(isTeamAServing?'→ B 发球':'→ A 发球'),),],);}}enumGameMode{basketball,badminton}