HarmonyOS ArkTS 实战：实现一个校园志愿服务时长记录应用

项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园志愿服务时长记录应用。应用可以发布志愿服务任务记录服务项目、活动地点、服务类型、预计时长和完成状态并提供签到、完成、筛选、删除和累计时长统计功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。功能介绍本项目实现了以下功能发布新的志愿服务任务设置服务项目名称和活动地点设置预计服务时长选择校园服务、社区公益或活动协助分类志愿者签到并开始服务完成服务并累计志愿时长按任务状态筛选记录统计累计时长、进行中和待签到任务删除不再需要的任务定义数据结构首先定义志愿服务记录的数据结构interfaceVolunteerRecord{id:number;title:string;location:string;hours:number;status:string;category:string;}各字段含义如下id任务的唯一编号title志愿服务项目名称location服务地点hours预计服务时长status任务当前状态category志愿服务分类初始化页面状态使用State保存输入框内容、筛选条件和任务列表StateprivatetitleText:string;StateprivatelocationText:string;StateprivatehoursText:string;Stateprivatecategory:string校园服务;StateprivatefilterType:string全部;StateprivatenextId:number6;准备一些初始数据方便运行后直接看到应用效果Stateprivaterecords:VolunteerRecord[][{id:1,title:图书馆书籍整理,location:校图书馆三楼,hours:2,status:已完成,category:校园服务},{id:2,title:迎新路线引导,location:学校南门,hours:3,status:进行中,category:活动协助},{id:3,title:社区环保宣传,location:朝阳社区,hours:4,status:待签到,category:社区公益},{id:4,title:运动会秩序维护,location:东区操场,hours:3,status:已完成,category:活动协助}];添加志愿服务任务用户填写项目名称、地点和预计时长后可以添加新的志愿任务privateaddRecord():void{consttitle:stringthis.titleText.trim();constlocation:stringthis.locationText.trim();consthours:numberNumber(this.hoursText);if(title.length0||location.length0||Number.isNaN(hours)||hours0){return;}constrecord:VolunteerRecord{id:this.nextId,title,location,hours,status:待签到,category:this.category};this.records[record,...this.records];this.nextId1;this.titleText;this.locationText;this.hoursText;}新添加的任务默认处于“待签到”状态并显示在列表顶部。实现签到和完成服务志愿任务包含三个状态待签到 - 进行中 - 已完成点击“签到开始”后任务进入进行中状态点击“完成服务”后任务变为已完成。privateadvanceStatus(id:number):void{this.recordsthis.records.map((item:VolunteerRecord){if(item.idid){constnextStatus:stringitem.status待签到?进行中:已完成;return{id:item.id,title:item.title,location:item.location,hours:item.hours,status:nextStatus,category:item.category};}returnitem;});}因为给records重新赋值所以状态改变后页面会自动刷新。筛选志愿任务页面可以按照待参与、服务中和已完成状态筛选任务privategetFilteredRecords():VolunteerRecord[]{if(this.filterType待参与){returnthis.records.filter((item:VolunteerRecord)item.status待签到);}if(this.filterType服务中){returnthis.records.filter((item:VolunteerRecord)item.status进行中);}if(this.filterType已完成){returnthis.records.filter((item:VolunteerRecord)item.status已完成);}returnthis.records;}筛选按钮可以封装成一个BuilderBuilderFilterButton(text:string){Button(text).height(34).layoutWeight(1).fontSize(12).fontColor(this.filterTypetext?Color.White:#344054).backgroundColor(this.filterTypetext?#047857:#E8EEF7).borderRadius(8).onClick((){this.filterTypetext;});}在页面中调用Row({space:8}){this.FilterButton(全部);this.FilterButton(待参与);this.FilterButton(服务中);this.FilterButton(已完成);}.width(100%);统计累计志愿时长只有已经完成的任务才会计入累计服务时长privategetTotalHours():number{lettotal:number0;this.records.forEach((item:VolunteerRecord){if(item.status已完成){totalitem.hours;}});returntotal;}统计指定状态的任务数量privategetCount(status:string):number{returnthis.records.filter((item:VolunteerRecord)item.statusstatus).length;}页面顶部展示三项关键数据this.StatCard(累计时长,${this.getTotalHours()}h,#047857,#ECFDF3);this.StatCard(服务进行中,${this.getCount(进行中)},#2563EB,#EFF6FF);this.StatCard(待签到,${this.getCount(待签到)},#D97706,#FFF7E8);删除任务不再需要的任务可以从列表中删除privatedeleteRecord(id:number):void{this.recordsthis.records.filter((item:VolunteerRecord)item.id!id);}删除后为records赋予了新的数组因此页面会立即更新。使用列表展示数据使用List和ForEach渲染筛选后的志愿任务List({space:10}){ForEach(this.getFilteredRecords(),(item:VolunteerRecord){ListItem(){this.RecordCard(item)}},(item:VolunteerRecord)item.id.toString());}.width(100%).layoutWeight(1).scrollBar(BarState.Off);每条任务记录通过自定义的RecordCard组件展示避免在主页面中编写大量重复代码。页面设计说明应用整体采用绿色作为主题色用于表达志愿、公益和成长。不同状态使用不同颜色绿色已经完成蓝色正在服务橙色等待签到红色删除操作页面主要分为以下区域顶部标题区域志愿服务数据统计区域新任务发布区域状态筛选区域志愿任务列表区域卡片使用白色背景和较小的圆角使页面保持清晰、简洁适合校园工具类应用。SDK 配置项目采用 HarmonyOS API 24满足 API 23 及以上的要求{ name: default, compatibleSdkVersion: 6.1.1(24), runtimeOS: HarmonyOS, targetSdkVersion: 6.1.1(24), compileSdkVersion: 6.1.1(24) }同时需要保证项目和 entry 模块中的runtimeOS保持一致。entry 模块配置如下{ apiType: stageMode, targets: [ { name: default, runtimeOS: HarmonyOS } ] }运行项目使用 DevEco Studio 打开项目等待项目同步完成然后打开entry/src/main/ets/pages/Index.ets点击右侧的Preview按钮即可查看应用运行效果。如果修改代码后预览没有立即更新可以点击预览窗口中的刷新按钮。项目总结本文使用 HarmonyOS 和 ArkTS 实现了一个校园志愿服务时长记录应用。项目实现了任务发布、分类选择、签到、完成、状态筛选、时长统计和删除等功能。通过这个项目可以掌握ArkTS 接口定义State状态管理TextInput输入组件List和ForEach列表渲染map和filter数组操作条件渲染自定义Builder组件HarmonyOS 页面布局简单的任务状态流转后续还可以加入用户登录、活动报名人数限制、服务证明生成、本地数据持久化和志愿排行榜等功能。