企业官网建设流程全解析

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:number=0;@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:number=10;

报名赛事

privatesignupMatch(matchId:number,teamName:string,captain:string):void{constmatch=this.matches.find(m=>m.id===matchId);if(!match)return;this.matches=this.matches.map(m=>m.id===matchId?{...m,joinedTeams:m.joinedTeams+1}:m);constsignup:Signup={id:this.nextId,matchId,matchName:match.name,teamName,captain,signupTime:newDate().toLocaleString(),status:'待审核'};this.mySignups=[signup,...this.mySignups];this.nextId+=1;}

更新比分

privateupdateScore(gameId:number,isTeamA:boolean,delta:number):void{this.games=this.games.map(g=>{if(g.id!==gameId)returng;returnisTeamA?{...g,scoreA:Math.max(0,g.scoreA+delta)}:{...g,scoreB:Math.max(0,g.scoreB+delta)};});}

结束比赛

privatefinishGame(gameId:number):void{this.games=this.games.map(g=>g.id===gameId?{...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.joinedTeams>=match.maxTeams?'#EF4444':'#059669')Blank()if(match.status==='报名中'&&match.joinedTeams<match.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.currentSport===s?Color.White:'#052E16').padding({left:12,right:12,top:6,bottom:6}).backgroundColor(this.currentSport===s?'#052E16':'#DCFCE7').borderRadius(16).onClick(()=>this.currentSport=s)})}}.scrollBar(BarState.Off).width('100%').padding({left:20,right:20})// TabRow({space:20}){Text('赛事报名').fontSize(16).fontWeight(this.tabIndex===0?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex===0?'#052E16':'#94A3B8').onClick(()=>this.tabIndex=0)Text('赛程比分').fontSize(16).fontWeight(this.tabIndex===1?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex===1?'#052E16':'#94A3B8').onClick(()=>this.tabIndex=1)Text('我的报名').fontSize(16).fontWeight(this.tabIndex===2?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex===2?'#052E16':'#94A3B8').onClick(()=>this.tabIndex=2)}.width('100%').padding({left:20,right:20,top:16})if(this.tabIndex===0){List({space:12}){ForEach(this.matches.filter(m=>this.currentSport==='全部'||m.sport===this.currentSport),(m:Match)=>{ListItem(){this.MatchCard(m)}})}.width('100%').padding(20).layoutWeight(1)}elseif(this.tabIndex===1){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 24，compatibleSdkVersion: “6.1.1(24)”

运行项目

将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。

项目总结

实现了赛事报名、赛程比分、球队管理、状态更新等功能。掌握了多Tab切换、横向筛选、比分更新、列表卡片等。后续可加入实时直播、裁判打分系统、奖牌榜、精彩瞬间上传、赛事导航、个人数据统计等功能。