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

【maaath】 Flutter for OpenHarmony足球计时应用开发实战

news 2026/5/10 23:54:01

Flutter 足球计时应用在 OpenHarmony 上的开发实战

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
作者：maaath

一、引言

随着 OpenHarmony 生态的快速发展，Flutter 作为优秀的跨平台框架，在鸿蒙设备上的适配日趋成熟。本文将带领读者从零构建一个功能完整的足球计时应用，涵盖比赛计时、进球统计、红黄牌管理、换人管理、数据导出、球队阵容管理、新闻资讯、直播提醒和社区讨论等九大功能模块。所有代码均已在 OpenHarmony 设备上验证通过，可直接运行。

项目完整代码已托管至 AtomGit 平台：https://atomgit.com，欢迎访问获取源码。

二、应用架构设计

在开始编码之前，我们先梳理应用的架构。整个应用采用分层设计：

数据模型层（Models）：定义球员、球队、比赛事件、新闻、提醒、帖子等数据结构
业务服务层（Services）：封装比赛逻辑、球队管理、新闻数据、提醒管理、社区交互等核心业务
页面展示层（Pages）：提供用户交互界面，包含 8 个功能页面

这种分层架构的好处是职责清晰、易于扩展。当需要增加新功能时，只需在对应层添加代码即可，不会影响现有逻辑。

三、数据模型层实现

数据模型是应用的基石。我们先定义球员模型，它包含了球员的基本信息和比赛状态：

classFootballPlayer{finalStringid;finalStringname;finalint number;finalStringposition;finalStringteamId;bool isOnField;int goals;int yellowCards;bool redCard;FootballPlayer({requiredthis.id,requiredthis.name,requiredthis.number,requiredthis.position,requiredthis.teamId,this.isOnField=true,this.goals=0,this.yellowCards=0,this.redCard=false,});StringgetpositionName{switch(position){case'GK':return'门将';case'CB':return'中后卫';case'CM':return'中场';case'ST':return'前锋';default:returnposition;}}}

接下来是比赛事件模型，它记录了比赛中发生的每一个关键事件：

enumFootballEventType{goal,ownGoal,penaltyGoal,yellowCard,redCard,secondYellowCard,substitution,penaltyMiss,}classFootballEvent{finalStringid;finalStringmatchId;finalFootballEventTypetype;finalint minute;finalStringplayerId;finalStringplayerName;finalint playerNumber;finalStringteamId;finalString?assistPlayerName;finalString?substitutePlayerName;Stringgetdescription{switch(type){caseFootballEventType.goal:returnassistPlayerName!=null?'$playerName进球 (助攻:$assistPlayerName)':'$playerName进球';caseFootballEventType.yellowCard:return'$playerName黄牌警告';caseFootballEventType.redCard:return'$playerName红牌罚下';caseFootballEventType.substitution:return'$playerName↓$substitutePlayerName↑';default:returntypeName;}}}

比赛模型是整个应用的核心，它管理着比赛的状态、计时和比分：

enumMatchStatus{notStarted,firstHalf,halfTime,secondHalf,finished}classFootballMatch{finalStringid;finalFootballTeamhomeTeam;finalFootballTeamawayTeam;int homeScore;int awayScore;MatchStatusstatus;int elapsedSeconds;List<FootballEvent>events;StringgetelapsedTime{finalminutes=elapsedSeconds~/60;finalseconds=elapsedSeconds%60;return'${minutes.toString().padLeft(2, '0')}:${seconds.toString().padLeft(2, '0')}';}}

四、核心业务服务层

比赛计时服务是整个应用的大脑。它使用Timer.periodic实现每秒计时，并自动处理上下半场切换：

classFootballMatchService{staticfinalFootballMatchService_instance=FootballMatchService._();factoryFootballMatchService()=>_instance;FootballMatchService._();final_teamService=FootballTeamService();FootballMatch?currentMatch;Timer?_timer;voidstartMatch(){currentMatch=currentMatch!.copyWith(status:MatchStatus.firstHalf,startTime:DateTime.now(),);_startTimer();}void_startTimer(){_timer=Timer.periodic(constDuration(seconds:1),(_){if(currentMatch==null)return;currentMatch=currentMatch!.copyWith(elapsedSeconds:currentMatch!.elapsedSeconds+1,);// 自动检测半场结束if(currentMatch!.elapsedSeconds>=45*60&&currentMatch!.status==MatchStatus.firstHalf){pauseMatch();currentMatch=currentMatch!.copyWith(status:MatchStatus.halfTime);}});}voidaddGoal(StringteamId,StringplayerId){// 创建进球事件，更新比分和球员进球数finalevent=FootballEvent(id:'E${++_eventIdCounter}',matchId:currentMatch!.id,type:FootballEventType.goal,minute:currentMatch!.elapsedSeconds~/60,playerId:playerId,playerName:player.name,playerNumber:player.number,teamId:teamId,);currentMatch=currentMatch!.copyWith(homeScore:teamId==currentMatch!.homeTeam.id?currentMatch!.homeScore+1:currentMatch!.homeScore,awayScore:teamId==currentMatch!.awayTeam.id?currentMatch!.awayScore+1:currentMatch!.awayScore,events:[...currentMatch!.events,event],);}}

这里使用了单例模式确保全局只有一个比赛实例。Timer.periodic每秒触发一次，更新elapsedSeconds，当达到 45 分钟（2700秒）时自动暂停并切换到中场休息状态。

红黄牌管理逻辑中，我们特别处理了"两黄变一红"的规则：

voidaddYellowCard(StringteamId,StringplayerId){finalplayer=team.players.firstWhere((p)=>p.id==playerId);finalisSecondYellow=player.yellowCards>=1;if(isSecondYellow){// 两黄变一红，罚下场_teamService.updatePlayer(teamId,player.copyWith(yellowCards:player.yellowCards+1,redCard:true,isOnField:false,));}else{_teamService.updatePlayer(teamId,player.copyWith(yellowCards:player.yellowCards+1,));}}

五、页面展示层实现

比赛计时页面是用户最常使用的界面。它包含比分看板、计时器、控制按钮和事件列表：

Widget_buildScoreBoard(FootballMatchmatch){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:LinearGradient(colors:[Colors.green.shade800,Colors.green.shade600],),),child:Column(children:[Text(match.statusName,style:TextStyle(color:Colors.white.withValues(alpha:0.8))),Text(match.elapsedTime,style:constTextStyle(color:Colors.white,fontSize:48,fontWeight:FontWeight.bold)),Row(mainAxisAlignment:MainAxisAlignment.spaceEvenly,children:[_buildTeamScore(match.homeTeam,match.homeScore),constText('VS',style:TextStyle(color:Colors.white)),_buildTeamScore(match.awayTeam,match.awayScore),],),],),);}

进球记录页面展示了完整的比赛统计信息，包括射手榜：

Widget_buildScorerRow(team){finalscorers=team.players.where((p)=>p.goals>0).toList()..sort((a,b)=>b.goals.compareTo(a.goals));returnColumn(children:scorers.map((p)=>Padding(padding:constEdgeInsets.only(left:28,top:4),child:Row(children:[Text('${p.number}'),constSizedBox(width:8),Text(p.name),constSpacer(),Row(children:List.generate(p.goals,(i)=>Icon(Icons.sports_soccer,size:14,color:Colors.orange),),),],),)).toList(),);}