HarmonyOS ArkTS 实战：实现一个校园志愿者招募与排班应用

HarmonyOS ArkTS 实战实现一个校园志愿者招募与排班应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园志愿者招募与排班应用。应用可以发布志愿活动在线报名自动排班签到签退时长统计并提供岗位选择、排班日历、时长证明、评价反馈等完整功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍志愿活动发布在线报名参加岗位选择自动排班分配排班日历查看签到签退服务时长统计时长证明下载志愿者评价星级志愿者评定消息通知志愿团队管理定义数据结构interfaceVolunteerActivity{id:number;title:string;date:string;location:string;positions:{name:string;need:number;joined:number}[];totalNeed:number;totalJoined:number;status:string;cover:string;}interfaceSchedule{id:number;activityId:number;activityTitle:string;date:string;timeSlot:string;position:string;location:string;status:string;}初始化页面状态StateprivatetabIndex:number0;StateprivatetotalHours:number156;StateprivatestarLevel:number5;StateprivateactivityNum:number32;Stateprivateactivities:VolunteerActivity[][{id:1,title:进博会志愿服务,date:2026-11-05,location:国家会展中心,positions:[{name:引导岗,need:20,joined:18},{name:翻译岗,need:10,joined:7}],totalNeed:30,totalJoined:25,status:招募中,cover:},{id:2,title:新生迎新志愿,date:2026-09-01,location:校门口,positions:[{name:引导岗,need:30,joined:30},{name:搬运行李,need:20,joined:20}],totalNeed:50,totalJoined:50,status:已截止,cover:},];Stateprivateschedules:Schedule[][{id:1,activityId:2,activityTitle:新生迎新志愿,date:2026-09-01,timeSlot:08:00-12:00,position:引导岗,location:校门口,status:已完成},];StateprivatenextId:number10;报名活动privatesignUp(activityId:number,positionName:string):void{this.activitiesthis.activities.map(a{if(a.id!activityId)returna;return{...a,totalJoined:a.totalJoined1,positions:a.positions.map(pp.namepositionName?{...p,joined:p.joined1}:p)};});}排班privateassignSchedule(activityId:number,timeSlot:string,position:string):void{constactivitythis.activities.find(aa.idactivityId);if(!activity)return;constschedule:Schedule{id:this.nextId,activityId,activityTitle:activity.title,date:activity.date,timeSlot,position,location:activity.location,status:待服务};this.schedules[schedule,...this.schedules];this.nextId1;}签到完成服务privatefinishService(scheduleId:number):void{this.schedulesthis.schedules.map(ss.idscheduleId?{...s,status:已完成}:s);this.totalHours4;this.activityNum1;}活动卡片组件BuilderActivityCard(activity:VolunteerActivity){Column({space:8}){Text(activity.title).fontSize(16).fontWeight(FontWeight.Medium).fontColor(#1E293B).width(100%)Text(${activity.date}| ${activity.location}).fontSize(12).fontColor(#64748B).width(100%)Row(){Text(已报名${activity.totalJoined}/${activity.totalNeed}).fontSize(12).fontColor(activity.totalJoinedactivity.totalNeed?#EF4444:#10B981)Blank()Text(activity.status).fontSize(12).fontColor(activity.status招募中?#2563EB:#94A3B8)}.width(100%).margin({top:4})if(activity.status招募中){Button(立即报名).width(100%).height(36).fontSize(14).backgroundColor(#1E293B).margin({top:8}).onClick(()this.signUp(activity.id,引导岗))}}.width(100%).padding(16).backgroundColor(#F8FAFC).borderRadius(12)}页面布局build(){Column(){// 顶部个人统计Row({space:12}){Column(){Text(${this.totalHours}).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#1E293B)Text(服务时长(h)).fontSize(12).fontColor(#64748B)}.layoutWeight(1).padding(20).backgroundColor(#F1F5F9).borderRadius(12)Column(){Text(${⭐.repeat(this.starLevel)}).fontSize(20)Text(${this.starLevel}星志愿者).fontSize(12).fontColor(#64748B)}.layoutWeight(1).padding(20).backgroundColor(#F1F5F9).borderRadius(12)}.width(100%).padding(20)// TabRow({space:20}){Text(活动招募).fontSize(16).fontWeight(this.tabIndex0?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex0?#1E293B:#94A3B8).onClick(()this.tabIndex0)Text(我的排班).fontSize(16).fontWeight(this.tabIndex1?FontWeight.Bold:FontWeight.Normal).fontColor(this.tabIndex1?#1E293B:#94A3B8).onClick(()this.tabIndex1)}.width(100%).padding({left:20,right:20})if(this.tabIndex0){List({space:12}){ForEach(this.activities,(a:VolunteerActivity){ListItem(){this.ActivityCard(a)}})}.width(100%).padding(20).layoutWeight(1)}else{List({space:12}){ForEach(this.schedules,(s:Schedule){ListItem(){Row(){Column({space:4}){Text(s.activityTitle).fontSize(14).fontWeight(FontWeight.Medium)Text(${s.date}${s.timeSlot}|${s.position}).fontSize(12).fontColor(#64748B)}.alignItems(HorizontalAlign.Start).layoutWeight(1)if(s.status待服务){Button(签到).fontSize(12).height(32).backgroundColor(#10B981).onClick(()this.finishService(s.id))}else{Text(已完成).fontSize(12).fontColor(#10B981)}}.width(100%).padding(16).backgroundColor(#F8FAFC).borderRadius(12)}})}.width(100%).padding(20).layoutWeight(1)}}.width(100%).height(100%).backgroundColor(Color.White)}页面设计说明主题色采用slate-800#1E293B体现志愿服务的专业、奉献。顶部展示服务时长和星级Tab切换活动和排班卡片式设计清晰展示信息。SDK配置API 24compatibleSdkVersion: “6.1.1(24)”运行项目将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。项目总结实现了活动招募、报名、排班、签到、时长统计、星级评定等功能。掌握了列表卡片、Tab切换、状态管理、数据统计等。后续可加入自动排班算法、日历视图、电子证书、评价系统、团队管理、培训考核等功能。