HarmonyOS ArkTS 实战：实现一个校园悬赏寻物失物招领应用

HarmonyOS ArkTS 实战实现一个校园悬赏寻物失物招领应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园悬赏寻物失物招领应用。应用可以发布失物招领和寻物启事设置悬赏金额在线联系认领审核并提供物品分类、搜索、消息通知、我的发布、成功案例等完整功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。运行效果功能介绍发布失物招领发布寻物启事设置悬赏金额物品分类筛选搜索物品在线联系认领申请审核确认我的发布成功案例消息通知信用积分定义数据结构interfaceLostItem{id:number;type:string;// 失物招领/寻物启事title:string;description:string;category:string;location:string;time:string;reward:number;contact:string;status:string;// 进行中/已找到/已认领publisher:string;images:string[];}interfaceClaim{id:number;itemId:number;claimer:string;description:string;time:string;status:string;// 待审核/已通过/已拒绝}初始化页面状态StateprivatetabIndex:number0;StateprivatecurrentType:string全部;StateprivatecurrentCategory:string全部;Stateprivatetypes:string[][全部,失物招领,寻物启事];Stateprivatecategories:string[][全部,证件卡片,电子设备,书籍文具,钥匙雨伞,其他];Stateprivateitems:LostItem[][{id:1,type:失物招领,title:捡到一张校园卡,description:在图书馆三楼捡到校园卡名字张某某,category:证件卡片,location:图书馆三楼,time:2026-07-22 10:00,reward:0,contact:微信xxx,status:进行中,publisher:李同学,images:[]},{id:2,type:寻物启事,title:寻找丢失的AirPods,description:今天下午在食堂丢失白色AirPods有重谢,category:电子设备,location:一食堂,time:2026-07-22 12:30,reward:50,contact:电话xxx,status:进行中,publisher:王同学,images:[]},{id:3,type:失物招领,title:捡到一串钥匙,description:在教学楼A楼门口捡到钥匙有卡通挂件,category:钥匙雨伞,location:教学楼A楼,time:2026-07-21 16:00,reward:0,contact:QQxxx,status:已认领,publisher:赵同学,images:[]},];Stateprivateclaims:Claim[][];StateprivatenextId:number10;发布物品privatepublishItem(type:string,title:string,description:string,category:string,location:string,reward:number,contact:string):void{constitem:LostItem{id:this.nextId,type,title,description,category,location,time:newDate().toLocaleString(),reward,contact,status:进行中,publisher:我,images:[]};this.items[item,...this.items];this.nextId1;}申请认领privateapplyClaim(itemId:number,description:string):void{constclaim:Claim{id:this.nextId,itemId,claimer:我,description,time:newDate().toLocaleString(),status:待审核};this.claims[claim,...this.claims];this.nextId1;}确认找到/认领privatemarkAsResolved(itemId:number):void{this.itemsthis.items.map(ii.iditemId?{...i,status:i.type寻物启事?已找到:已认领}:i);}物品卡片组件BuilderItemCard(item:LostItem){Column({space:8}){Row(){Text(item.type).fontSize(12).fontColor(Color.White).padding({left:8,right:8,top:4,bottom:4}).backgroundColor(item.type失物招领?#10B981:#F59E0B).borderRadius(10)if(item.reward0){Text(悬赏¥${item.reward}).fontSize(12).fontColor(#EF4444).fontWeight(FontWeight.Bold)}Blank()Text(item.status).fontSize(12).fontColor(item.status进行中?#2563EB:#94A3B8)}.width(100%)Text(item.title).fontSize(16).fontWeight(FontWeight.Medium).fontColor(#082F49).width(100%)Text(item.description).fontSize(13).fontColor(#64748B).width(100%).maxLines(2).textOverflow({overflow:TextOverflow.Ellipsis})Row(){Text(${item.location}).fontSize(12).fontColor(#94A3B8)Text(${item.time.split( )[0]}).fontSize(12).fontColor(#94A3B8)Blank()Text(item.publisher).fontSize(12).fontColor(#94A3B8)}.width(100%).margin({top:4})if(item.status进行中){Button(item.type失物招领?我要认领:我看到了).width(100%).height(36).fontSize(14).backgroundColor(#082F49).margin({top:8}).onClick(()this.applyClaim(item.id,描述物品特征))}}.width(100%).padding(16).backgroundColor(#F0F9FF).borderRadius(12)}页面布局build(){Column(){// 搜索栏TextInput({placeholder:搜索丢失物品}).width(100%).height(40).margin(20).backgroundColor(#F0F9FF).borderRadius(20)// 类型筛选Scroll(Axis.Horizontal){Row({space:8}){ForEach(this.types,(t:string){Text(t).fontSize(13).fontColor(this.currentTypet?Color.White:#082F49).padding({left:12,right:12,top:6,bottom:6}).backgroundColor(this.currentTypet?#082F49:#E0F2FE).borderRadius(16).onClick(()this.currentTypet)})}}.scrollBar(BarState.Off).width(100%).padding({left:20,right:20})// 分类筛选Scroll(Axis.Horizontal){Row({space:8}){ForEach(this.categories,(c:string){Text(c).fontSize(12).fontColor(this.currentCategoryc?#082F49:#64748B).padding({left:10,right:10,top:5,bottom:5}).backgroundColor(this.currentCategoryc?#BAE6FD:#F0F9FF).borderRadius(14).onClick(()this.currentCategoryc)})}}.scrollBar(BarState.Off).width(100%).padding({left:20,right:20,top:12})// 物品列表List({space:12}){ForEach(this.items.filter(i(this.currentType全部||i.typethis.currentType)(this.currentCategory全部||i.categorythis.currentCategory)),(item:LostItem){ListItem(){this.ItemCard(item)}})}.width(100%).padding(20).layoutWeight(1)// 发布按钮Button( 发布).width(90%).height(48).fontSize(16).backgroundColor(#082F49).borderRadius(24).margin({bottom:20}).onClick(()this.publishItem(寻物启事,物品名称,详细描述,其他,地点,0,联系方式))}.width(100%).height(100%).backgroundColor(Color.White)}页面设计说明主题色采用sky-950#082F49体现失物招领的信任、可靠。蓝色系给人安全感绿色招领黄色寻物清晰区分悬赏金额红色突出。SDK配置API 24compatibleSdkVersion: “6.1.1(24)”运行项目将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。项目总结实现了失物招领和寻物启事发布、筛选、认领、悬赏、状态更新等功能。掌握了多条件筛选、卡片组件、状态标签、发布流程等。后续可加入图片上传、聊天功能、位置定位、信用系统、物品匹配、失物归还奖励等功能。