HarmonyOS ArkTS 实战：实现一个校园爱心捐赠物资登记应用
HarmonyOS ArkTS 实战：实现一个校园爱心捐赠物资登记应用
项目效果
本文使用 HarmonyOS 和 ArkTS 实现一个校园爱心捐赠物资登记应用。
应用可以发布学习用品、生活用品、衣物鞋帽和运动器材等爱心物资，记录捐赠人和物资数量，并提供审核上架、领取确认、状态筛选和物资统计功能。
项目使用 DevEco Studio 开发，适配 API 23 及以上版本。
功能介绍
本项目实现了以下功能：
- 登记校园爱心捐赠物资
- 填写物资名称、捐赠人和数量
- 选择物资分类
- 审核捐赠物资
- 将物资上架为可领取状态
- 确认物资已经领取
- 按待审核、可领取和已领取筛选
- 统计物资总数、待审核和可领取数量
- 删除无效物资记录
定义数据结构
首先定义爱心物资的数据结构：
interfaceDonationRecord{id:number;itemName:string;donor:string;quantity:number;category:string;status:string;}字段说明如下：
id：物资记录的唯一编号itemName：物资名称donor：捐赠人quantity：物资数量category：物资分类status：物资流转状态
初始化页面状态
使用@State保存输入内容、物资分类和筛选条件：
@StateprivateitemText:string='';@StateprivatedonorText:string='';@StateprivatequantityText:string='';@Stateprivatecategory:string='学习用品';@StateprivatefilterType:string='全部';@StateprivatenextId:number=6;准备一些初始数据，让应用运行后可以直接展示完整效果：
@Stateprivaterecords:DonationRecord[]=[{id:1,itemName:'考研英语复习资料',donor:'林同学',quantity:6,category:'学习用品',status:'待审核'},{id:2,itemName:'保温水杯',donor:'周同学',quantity:3,category:'生活用品',status:'可领取'},{id:3,itemName:'闲置运动服',donor:'校园跑团',quantity:12,category:'衣物鞋帽',status:'已领取'},{id:4,itemName:'羽毛球拍',donor:'王同学',quantity:2,category:'运动器材',status:'可领取'}];添加捐赠物资
用户填写物资名称、捐赠人和数量后，可以提交新的爱心物资：
privateaddRecord():void{constitemName:string=this.itemText.trim();constdonor:string=this.donorText.trim();constquantity:number=Number(this.quantityText);if(itemName.length===0||donor.length===0||Number.isNaN(quantity)||quantity<=0){return;}constrecord:DonationRecord={id:this.nextId,itemName,donor,quantity,category:this.category,status:'待审核'};this.records=[record,...this.records];this.nextId+=1;this.itemText='';this.donorText='';this.quantityText='';}新提交的物资默认处于“待审核”状态。
物资状态流转
物资状态按照以下流程变化：
待审核 -> 可领取 -> 已领取使用下面的方法更新物资状态：
privateadvanceStatus(id:number):void{this.records=this.records.map((item:DonationRecord)=>{if(item.id===id){conststatus:string=item.status==='待审核'?'可领取':'已领取';return{id:item.id,itemName:item.itemName,donor:item.donor,quantity:item.quantity,category:item.category,status};}returnitem;});}待审核物资点击“审核上架”后变为可领取状态；可领取物资点击“确认领取”后变为已领取状态。
筛选物资记录
页面支持按物资状态筛选：
privategetFilteredRecords():DonationRecord[]{if(this.filterType==='待审核'){returnthis.records.filter((item:DonationRecord)=>item.status==='待审核');}if(this.filterType==='可领取'){returnthis.records.filter((item:DonationRecord)=>item.status==='可领取');}if(this.filterType==='已领取'){returnthis.records.filter((item:DonationRecord)=>item.status==='已领取');}returnthis.records;}筛选按钮可以封装为一个@Builder组件：
@BuilderFilterButton(text:string){Button(text).height(34).layoutWeight(1).fontSize(12).fontColor(this.filterType===text?Color.White:'#344054').backgroundColor(this.filterType===text?'#BE123C':'#E8EEF7').borderRadius(8).onClick(()=>{this.filterType=text;});}统计物资总数
统计全部物资数量：
privategetTotalQuantity():number{lettotal:number=0;this.records.forEach((item:DonationRecord)=>{total+=item.quantity;});returntotal;}统计指定状态的物资数量：
privategetCount(status:string):number{returnthis.records.filter((item:DonationRecord)=>item.status===status).length;}页面顶部展示物资总数、待审核和可领取数量：
this.StatCard('物资总数',`${this.getTotalQuantity()}`,'#BE123C','#FFF1F2');this.StatCard('等待审核',`${this.getCount('待审核')}`,'#D97706','#FFF7E8');this.StatCard('可领取',`${this.getCount('可领取')}`,'#2563EB','#EFF6FF');设置分类颜色
不同物资分类使用不同颜色：
privategetCategoryColor(category:string):ResourceColor{if(category==='学习用品'){return'#2563EB';}if(category==='生活用品'){return'#0891B2';}if(category==='衣物鞋帽'){return'#7C3AED';}return'#D97706';}颜色含义如下：
- 蓝色：学习用品
- 青色：生活用品
- 紫色：衣物鞋帽
- 橙色：运动器材
- 红色：爱心驿站主题色
删除物资记录
不再需要的物资记录可以从列表中删除：
privatedeleteRecord(id:number):void{this.records=this.records.filter((item:DonationRecord)=>item.id!==id);}删除后，物资列表和顶部统计数据会自动刷新。
使用列表展示物资
使用List和ForEach渲染筛选后的物资记录：
List({space:10}){ForEach(this.getFilteredRecords(),(item:DonationRecord)=>{ListItem(){this.DonationCard(item)}},(item:DonationRecord)=>item.id.toString());}.width('100%').layoutWeight(1).scrollBar(BarState.Off);每条物资记录使用独立卡片展示，卡片中包含物资名称、捐赠人、物资分类、数量、状态和操作按钮。
页面设计说明
应用采用暖红色作为主题色，表达校园公益和爱心传递的主题。
页面主要分为以下区域：
- 顶部标题和爱心物资总数
- 物资数据统计区域
- 新物资登记区域
- 物资状态筛选区域
- 爱心物资记录列表
页面使用浅灰色背景和白色卡片，不同物资类别和状态使用不同颜色，便于快速查看物资进度。
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 模块中的运行系统也要保持一致：
{ "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 页面布局
后续还可以加入领取人信息、物资图片、爱心积分、消息提醒、公益活动报名和本地数据持久化等功能。