HarmonyOS ArkTS 实战：实现一个校园二手物品交换信息板应用

HarmonyOS ArkTS 实战实现一个校园二手物品交换信息板应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园二手物品交换信息板应用。应用可以发布校园闲置物品记录物品名称、卖家、价格、分类和交易状态并支持物品预订、确认成交、重新上架、状态筛选、数据统计和删除等功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。功能介绍本项目实现了以下功能发布校园闲置物品填写物品名称、卖家和价格选择学习资料、宿舍用品或运动器材分类预订正在出售的物品确认物品交易完成将已售出的物品重新上架按交易状态筛选物品统计全部物品、在售物品和已售出物品数量删除不再需要的物品记录定义物品数据结构首先定义二手物品的数据结构interfaceMarketItem{id:number;name:string;seller:string;price:number;category:string;status:string;}各字段含义如下id物品记录的唯一编号name物品名称seller卖家信息price出售价格category物品分类status当前交易状态初始化页面状态使用State保存输入框、分类、筛选条件和物品列表StateprivatenameText:string;StateprivatesellerText:string;StateprivatepriceText:string;Stateprivatecategory:string学习资料;StateprivatefilterType:string全部;StateprivatenextId:number6;准备一些初始数据让应用运行后可以直接展示完整效果Stateprivateitems:MarketItem[][{id:1,name:高等数学复习资料,seller:林同学 · 计科 2302,price:12,category:学习资料,status:在售},{id:2,name:九成新台灯,seller:陈同学 · 3 号宿舍楼,price:35,category:宿舍用品,status:已预订},{id:3,name:羽毛球拍一对,seller:周同学 · 体育学院,price:48,category:运动器材,status:在售},{id:4,name:大学英语四级词汇书,seller:王同学 · 外语学院,price:8,category:学习资料,status:已售出}];发布闲置物品用户填写物品名称、卖家信息和价格后可以将物品发布到列表中privateaddItem():void{constname:stringthis.nameText.trim();constseller:stringthis.sellerText.trim();constprice:numberNumber(this.priceText);if(name.length0||seller.length0||Number.isNaN(price)||price0){return;}constitem:MarketItem{id:this.nextId,name,seller,price,category:this.category,status:在售};this.items[item,...this.items];this.nextId1;this.nameText;this.sellerText;this.priceText;}新发布的物品默认处于“在售”状态并显示在列表顶部。实现交易状态切换应用中的交易状态按照下面的顺序变化在售 - 已预订 - 已售出 - 重新上架状态切换代码如下privateadvanceStatus(id:number):void{this.itemsthis.items.map((item:MarketItem){if(item.idid){letnextStatus:string在售;if(item.status在售){nextStatus已预订;}elseif(item.status已预订){nextStatus已售出;}return{id:item.id,name:item.name,seller:item.seller,price:item.price,category:item.category,status:nextStatus};}returnitem;});}当物品处于在售状态时按钮显示“预订物品”处于已预订状态时按钮显示“确认成交”交易完成后可以重新上架。实现状态筛选页面支持按照物品交易状态进行筛选privategetFilteredItems():MarketItem[]{if(this.filterType可购买){returnthis.items.filter((item:MarketItem)item.status在售);}if(this.filterType已预订){returnthis.items.filter((item:MarketItem)item.status已预订);}if(this.filterType已完成){returnthis.items.filter((item:MarketItem)item.status已售出);}returnthis.items;}筛选按钮可以封装为一个自定义组件BuilderFilterButton(text:string){Button(text).height(34).layoutWeight(1).fontSize(12).fontColor(this.filterTypetext?Color.White:#344054).backgroundColor(this.filterTypetext?#2563EB:#E8EEF7).borderRadius(8).onClick((){this.filterTypetext;});}在页面中调用筛选按钮Row({space:8}){this.FilterButton(全部);this.FilterButton(可购买);this.FilterButton(已预订);this.FilterButton(已完成);}.width(100%);统计交易数据使用filter统计指定状态的物品数量privategetCount(status:string):number{returnthis.items.filter((item:MarketItem)item.statusstatus).length;}页面顶部展示三项统计数据this.StatCard(全部物品,${this.items.length},#2563EB,#EFF6FF);this.StatCard(等待交易,${this.getCount(在售)},#059669,#ECFDF3);this.StatCard(已经售出,${this.getCount(已售出)},#7C3AED,#F4F3FF);设置状态颜色不同的交易状态使用不同颜色privategetStatusColor(status:string):ResourceColor{if(status在售){return#059669;}if(status已预订){return#D97706;}return#667085;}颜色对应关系如下绿色物品正在出售橙色物品已经被预订灰色交易已经完成蓝色主要操作按钮红色价格和删除操作删除物品用户可以删除不再需要展示的物品privatedeleteItem(id:number):void{this.itemsthis.items.filter((item:MarketItem)item.id!id);}这里通过filter创建一个不包含目标物品的新数组。重新赋值后ArkUI 会自动更新列表。使用列表展示物品使用List和ForEach渲染筛选后的物品List({space:10}){ForEach(this.getFilteredItems(),(item:MarketItem){ListItem(){this.ItemCard(item)}},(item:MarketItem)item.id.toString());}.width(100%).layoutWeight(1).scrollBar(BarState.Off);每件物品都通过ItemCard自定义组件展示卡片中包含名称、卖家、价格、分类、状态和操作按钮。分类选择组件使用分类按钮设置物品类型BuilderCategoryButton(text:string){Button(text).height(34).layoutWeight(1).fontSize(12).fontColor(this.categorytext?Color.White:#344054).backgroundColor(this.categorytext?this.getCategoryColor(text):#E8EEF7).borderRadius(8).onClick((){this.categorytext;});}页面中提供三个分类Row({space:8}){this.CategoryButton(学习资料);this.CategoryButton(宿舍用品);this.CategoryButton(运动器材);}.width(100%);页面设计说明应用采用蓝色作为主要颜色整体风格清晰简洁。页面主要分为以下区域顶部应用标题区域物品数量统计区域闲置物品发布区域交易状态筛选区域校园物品列表区域白色卡片与浅灰色背景形成清晰层次价格使用红色突出显示交易状态使用不同颜色区分适合在手机端快速浏览。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 页面布局简单的交易状态管理后续还可以加入物品图片、关键字搜索、卖家联系方式、本地数据持久化、收藏功能和校园身份认证等功能。