HarmonyOS ArkTS 实战：实现一个校园体育赛事报名与裁判应用

HarmonyOS ArkTS 实战实现一个校园体育赛事报名与裁判应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园体育赛事报名与裁判应用。应用可以查看赛事信息在线报名赛程查看裁判打分实时比分并提供球队管理、成绩公告、赛事统计、奖牌榜等完整功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍赛事信息浏览在线报名参赛球队/个人报名赛程表查看实时比分裁判打分成绩公告奖牌榜统计我的赛事赛事提醒精彩瞬间赛事导航定义数据结构interfaceMatch{id:number;name:string;sport:string;time:string;location:string;signupDeadline:string;maxTeams:number;joinedTeams:number;status:string;// 报名中/进行中/已结束description:string;}interfaceGame{id:number;matchId:number;teamA:string;teamB:string;scoreA:number;scoreB:number;time:string;location:string;status:string;// 未开始/进行中/已结束}interfaceSignup{id:number;matchId:number;matchName:string;teamName:string;captain:string;signupTime:string;status:string;// 待审核/已通过/已拒绝}初始化页面状态StateprivatetabIndex:number0;StateprivatecurrentSport:string全部;Stateprivatesports:string[][全部,篮球,足球,羽毛球,乒乓球,田径,游泳];Stateprivatematches:Match[][{id:1,name:2026校园篮球联赛,sport:篮球,time:2026-09-01,location:体育馆,signupDeadline:2026-08-20,maxTeams:16,joinedTeams:12,status:报名中,description:全校篮球联赛欢迎各院队报名},{id:2,name:新生杯足球赛,sport:足球,time:2026-09-15,location:足球场,signupDeadline:2026-09-05,maxTeams:24,joinedTeams:24,status:报名中,description:面向新生的足球赛事},{id:3,name:春季羽毛球赛,sport:羽毛球,time:2026-05-20,location:羽毛球馆,signupDeadline:2026-05-10,maxTeams:64,joinedTeams:64,status:已结束,description:男女单打、双打比赛},];Stateprivategames:Game[][{id:1,matchId:3,teamA:计算机学院,teamB:经管学院,scoreA:3,scoreB:1,time:2026-05-20 14:00,location:羽毛球馆1号场,status:已结束},];StateprivatemySignups:Signup[][];StateprivatenextId:number10;报名赛事privatesignupMatch(matchId:number,teamName:string,captain:string):void{constmatchthis.matches.find(mm.idmatchId);if(!match)return;this.matchesthis.matches.map(mm.idmatchId?{...m,joinedTeams:m.joinedTeams1}:m);constsignup:Signup{id:this.nextId,matchId,matchName:match.name,teamName,captain,signupTime:newDate().toLocaleString(),status:待审核};this.mySignups[signup,...this.mySignups];this.nextId1;}更新比分privateupdateScore(gameId:number,isTeamA:boolean,delta:number):void{this.gamesthis.games.map(g{if(g.id!gameId)returng;returnisTeamA?{...g,scoreA:Math.max(0,g.scoreAdelta)}:{...g,scoreB:Math.max(0,g.scoreBdelta)};});}结束比赛privatefinishGame(gameId:number):void{this.gamesthis.games.map(gg.idgameId?{...g,status:已结束}:g);}赛事卡片组件BuilderMatchCard(match:Match){Column({space:8}){Text(match.name).fontSize(17).fontWeight(FontWeight.Bold).fontColor(#052E16).width(100%)Text(match.sport).fontSize(12).fontColor(Color.White).padding({left:8,right:8,top:3,bottom:3}).backgroundColor(#059669).borderRadius(10).alignSelf(ItemAlign.Start)Text(${match.time}).fontSize(12).fontColor(#64748B)Text(${match.location}).fontSize(12).fontColor(#64748B)Row(){Text(已报名${match.joinedTeams}/${match.maxTeams}队).fontSize(12).fontColor(match.joinedTeamsmatch.maxTeams?#EF4444:#059669)Blank()if(match.status报名中match.joinedTeamsmatch.maxTeams){Button(立即报名).fontSize(13).height(34).backgroundColor(#052E16).onClick(()this.signupMatch(match.id,计算机学院队,张同学))}}.width(100%).margin({top:4})}.width(100%).padding(16).backgroundColor(#F0FDF4).borderRadius(12)}页面布局build(){Column(){// 标题Text(校园体育赛事).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#052E16).width(100%).padding(20)// 项目筛选Scroll(Axis.Horizontal){Row({space:8}){ForEach(this.sports,(s:string){Text(s).fontSize(13).fontColor(this.currentSports?Color.White:#052E16).padding({left:12,right:12,top:6,bottom:6}).backgroundColor(this.currentSports?#052E16:#DCFCE7).borderRadius(16).onClick(()this.currentSports)})}}.scrollBar(BarState.Off).width(100%).padding({left:20,right:20})// TabRow({space:20}){Text(赛事报名).fontSize(16).fontWeight(this.tabIndex0?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex0?#052E16:#94A3B8).onClick(()this.tabIndex0)Text(赛程比分).fontSize(16).fontWeight(this.tabIndex1?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex1?#052E16:#94A3B8).onClick(()this.tabIndex1)Text(我的报名).fontSize(16).fontWeight(this.tabIndex2?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex2?#052E16:#94A3B8).onClick(()this.tabIndex2)}.width(100%).padding({left:20,right:20,top:16})if(this.tabIndex0){List({space:12}){ForEach(this.matches.filter(mthis.currentSport全部||m.sportthis.currentSport),(m:Match){ListItem(){this.MatchCard(m)}})}.width(100%).padding(20).layoutWeight(1)}elseif(this.tabIndex1){List({space:12}){ForEach(this.games,(g:Game){ListItem(){Column({space:12}){Text(${g.teamA}VS${g.teamB}).fontSize(16).fontWeight(FontWeight.Medium)Row(){Text(${g.scoreA}).fontSize(32).fontWeight(FontWeight.Bold).fontColor(#052E16)Text(:).fontSize(32).fontWeight(FontWeight.Bold)Text(${g.scoreB}).fontSize(32).fontWeight(FontWeight.Bold).fontColor(#052E16)}Text(${g.time}|${g.location}).fontSize(12).fontColor(#64748B)}.width(100%).padding(16).backgroundColor(#F0FDF4).borderRadius(12)}})}.width(100%).padding(20).layoutWeight(1)}else{List({space:12}){ForEach(this.mySignups,(s:Signup){ListItem(){Column({space:8}){Text(s.matchName).fontSize(15).fontWeight(FontWeight.Medium)Text(队伍${s.teamName}| 队长${s.captain}).fontSize(12).fontColor(#64748B)Text(s.status).fontSize(12).fontColor(s.status已通过?#059669:#F59E0B)}.width(100%).padding(16).backgroundColor(#F0FDF4).borderRadius(12)}})}.width(100%).padding(20).layoutWeight(1)}}.width(100%).height(100%).backgroundColor(Color.White)}页面设计说明主题色采用green-950#052E16深绿色体现体育的活力、健康、竞技。绿色背景卡片比分大字醒目项目筛选横向滚动。SDK配置API 24compatibleSdkVersion: “6.1.1(24)”运行项目将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。项目总结实现了赛事报名、赛程比分、球队管理、状态更新等功能。掌握了多Tab切换、横向筛选、比分更新、列表卡片等。后续可加入实时直播、裁判打分系统、奖牌榜、精彩瞬间上传、赛事导航、个人数据统计等功能。