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:number6;准备一些初始数据让应用运行后可以直接展示完整效果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:stringthis.itemText.trim();constdonor:stringthis.donorText.trim();constquantity:numberNumber(this.quantityText);if(itemName.length0||donor.length0||Number.isNaN(quantity)||quantity0){return;}constrecord:DonationRecord{id:this.nextId,itemName,donor,quantity,category:this.category,status:待审核};this.records[record,...this.records];this.nextId1;this.itemText;this.donorText;this.quantityText;}新提交的物资默认处于“待审核”状态。物资状态流转物资状态按照以下流程变化待审核 - 可领取 - 已领取使用下面的方法更新物资状态privateadvanceStatus(id:number):void{this.recordsthis.records.map((item:DonationRecord){if(item.idid){conststatus:stringitem.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.filterTypetext?Color.White:#344054).backgroundColor(this.filterTypetext?#BE123C:#E8EEF7).borderRadius(8).onClick((){this.filterTypetext;});}统计物资总数统计全部物资数量privategetTotalQuantity():number{lettotal:number0;this.records.forEach((item:DonationRecord){totalitem.quantity;});returntotal;}统计指定状态的物资数量privategetCount(status:string):number{returnthis.records.filter((item:DonationRecord)item.statusstatus).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.recordsthis.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 页面布局后续还可以加入领取人信息、物资图片、爱心积分、消息提醒、公益活动报名和本地数据持久化等功能。