HarmonyOS ArkTS 实战实现一个校园二手物品交易应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园二手物品交易应用。应用可以发布二手物品信息设置物品价格和新旧程度浏览商品列表联系卖家标记物品已售出并提供分类筛选、价格排序和收藏等功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。功能介绍本项目实现了以下功能发布二手物品信息填写物品名称和详细描述设置物品价格选择物品分类选择新旧程度留下卖家联系方式标记物品已售出收藏感兴趣的物品按分类和状态筛选物品按价格排序统计在售、已售和收藏数量删除已下架的物品定义数据结构首先定义二手商品的数据结构interfaceSecondHandItem{id:number;title:string;description:string;price:number;originalPrice:number;category:string;condition:string;seller:string;contact:string;status:string;isCollected:boolean;publishTime:string;}字段说明如下id商品的唯一编号title物品标题description物品详细描述price出售价格originalPrice原价category物品分类condition新旧程度seller卖家姓名contact联系方式status商品状态在售/已售出isCollected是否已收藏publishTime发布时间初始化页面状态使用State保存输入内容、分类选择、筛选条件和排序方式StateprivatetitleText:string;StateprivatedescriptionText:string;StateprivatepriceText:string;StateprivateoriginalPriceText:string;StateprivatecontactText:string;StateprivatesellerText:string;Stateprivatecategory:string数码产品;Stateprivatecondition:string九成新;StateprivatefilterType:string全部;StateprivatesortType:string默认;StateprivatenextId:number6;准备一些初始数据让应用运行后可以直接展示完整效果Stateprivateitems:SecondHandItem[][{id:1,title:iPad Air 4 64G 银色,description:自用一年无磕碰带原装充电器和保护套,price:2200,originalPrice:4799,category:数码产品,condition:九成新,seller:陈同学,contact:微信chen2026,status:在售,isCollected:false,publishTime:2026-07-15},{id:2,title:高等数学同济第七版,description:上下册两本有少量笔记不影响使用,price:15,originalPrice:80,category:书籍教材,condition:八成新,seller:刘同学,contact:QQ123456789,status:在售,isCollected:true,publishTime:2026-07-16},{id:3,title:捷安特山地车,description:ATX660骑了两年刹车刚换过,price:450,originalPrice:1298,category:生活用品,condition:七成新,seller:周同学,contact:电话139****1234,status:已售出,isCollected:false,publishTime:2026-07-10},{id:4,title:罗技G304无线鼠标,description:白色用了三个月包装齐全,price:120,originalPrice:229,category:数码产品,condition:九五新,seller:吴同学,contact:微信wuxiaoming,status:在售,isCollected:false,publishTime:2026-07-17}];发布二手物品用户填写物品信息后可以发布新的二手商品privateaddItem():void{consttitle:stringthis.titleText.trim();constprice:numberparseInt(this.priceText);constseller:stringthis.sellerText.trim();constcontact:stringthis.contactText.trim();if(title.length0||isNaN(price)||seller.length0||contact.length0){return;}constoriginalPrice:numberthis.originalPriceText?parseInt(this.originalPriceText):price*2;consttodaynewDate();constdateStr${today.getFullYear()}-${String(today.getMonth()1).padStart(2,0)}-${String(today.getDate()).padStart(2,0)};constitem:SecondHandItem{id:this.nextId,title,description:this.descriptionText.trim(),price,originalPrice,category:this.category,condition:this.condition,seller,contact,status:在售,isCollected:false,publishTime:dateStr};this.items[item,...this.items];this.nextId1;this.titleText;this.descriptionText;this.priceText;this.originalPriceText;this.sellerText;this.contactText;}新发布的物品默认处于在售状态。商品状态流转二手商品按照以下流程处理在售 - 已售出使用以下方法更新商品状态privatemarkAsSold(id:number):void{this.itemsthis.items.map((item:SecondHandItem){if(item.idid){return{id:item.id,title:item.title,description:item.description,price:item.price,originalPrice:item.originalPrice,category:item.category,condition:item.condition,seller:item.seller,contact:item.contact,status:已售出,isCollected:item.isCollected,publishTime:item.publishTime};}returnitem;});}在售状态点击标记已售后变为已售出状态。收藏与取消收藏用户可以收藏感兴趣的物品privatetoggleCollect(id:number):void{this.itemsthis.items.map((item:SecondHandItem){if(item.idid){return{id:item.id,title:item.title,description:item.description,price:item.price,originalPrice:item.originalPrice,category:item.category,condition:item.condition,seller:item.seller,contact:item.contact,status:item.status,isCollected:!item.isCollected,publishTime:item.publishTime};}returnitem;});}点击收藏按钮可以切换收藏状态。筛选和排序物品页面支持按照分类和状态筛选并支持价格排序privategetFilteredItems():SecondHandItem[]{letresult[...this.items];if(this.filterType在售){resultresult.filter((item:SecondHandItem)item.status在售);}elseif(this.filterType已售出){resultresult.filter((item:SecondHandItem)item.status已售出);}elseif(this.filterType我的收藏){resultresult.filter((item:SecondHandItem)item.isCollected);}elseif(this.filterType!全部){resultresult.filter((item:SecondHandItem)item.categorythis.filterType);}if(this.sortType价格从低到高){result.sort((a,b)a.price-b.price);}elseif(this.sortType价格从高到低){result.sort((a,b)b.price-a.price);}returnresult;}筛选按钮封装如下BuilderFilterButton(text:string){Button(text).height(32).padding({left:12,right:12}).fontSize(12).fontColor(this.filterTypetext?Color.White:#344054).backgroundColor(this.filterTypetext?#EA580C:#FFF7ED).borderRadius(16).onClick((){this.filterTypetext;});}选择新旧程度页面支持多种新旧程度选择BuilderConditionButton(text:string){Button(text).height(34).layoutWeight(1).fontSize(12).fontColor(this.conditiontext?Color.White:#344054).backgroundColor(this.conditiontext?#EA580C:#F3F4F6).borderRadius(8).onClick((){this.conditiontext;});}不同新旧程度使用橙色主题色高亮显示。统计商品数据使用filter统计各类商品数量privategetCount(filter:string):number{if(filter在售){returnthis.items.filter((item:SecondHandItem)item.status在售).length;}if(filter已售出){returnthis.items.filter((item:SecondHandItem)item.status已售出).length;}if(filter收藏){returnthis.items.filter((item:SecondHandItem)item.isCollected).length;}returnthis.items.length;}顶部统计区域展示全部商品、在售、已售出和收藏数量this.StatCard(全部商品,${this.getCount(全部)},#EA580C,#FFF7ED);this.StatCard(正在出售,${this.getCount(在售)},#059669,#ECFDF5);this.StatCard(我的收藏,${this.getCount(收藏)},#DC2626,#FEF2F2);设置状态颜色不同商品状态使用不同颜色privategetStatusColor(status:string):ResourceColor{if(status在售){return#059669;}return#6B7280;}privategetConditionColor(condition:string):ResourceColor{if(condition全新||condition九五新){return#059669;}if(condition九成新||condition八成新){return#D97706;}return#DC2626;}颜色含义如下绿色在售/成色较新橙色成色一般红色成色较旧/收藏橙色页面主题色删除商品记录已下架或过期的商品可以删除privatedeleteItem(id:number):void{this.itemsthis.items.filter((item:SecondHandItem)item.id!id);}删除后商品列表和顶部统计数据会自动更新。使用列表展示商品使用List和ForEach渲染筛选后的商品List({space:12}){ForEach(this.getFilteredItems(),(item:SecondHandItem){ListItem(){this.ItemCard(item)}},(item:SecondHandItem)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状态管理数字输入和价格处理List和ForEach列表渲染map和filter数组操作多条件筛选和排序收藏状态切换自定义Builder组件HarmonyOS 商品卡片布局后续还可以加入商品图片上传、聊天功能、议价功能、同城面交定位、信用评价系统、搜索功能和交易担保等功能。
HarmonyOS ArkTS 实战：实现一个校园二手物品交易应用
HarmonyOS ArkTS 实战实现一个校园二手物品交易应用项目效果本文使用 HarmonyOS 和 ArkTS 实现一个校园二手物品交易应用。应用可以发布二手物品信息设置物品价格和新旧程度浏览商品列表联系卖家标记物品已售出并提供分类筛选、价格排序和收藏等功能。项目使用 DevEco Studio 开发适配 API 23 及以上版本。功能介绍本项目实现了以下功能发布二手物品信息填写物品名称和详细描述设置物品价格选择物品分类选择新旧程度留下卖家联系方式标记物品已售出收藏感兴趣的物品按分类和状态筛选物品按价格排序统计在售、已售和收藏数量删除已下架的物品定义数据结构首先定义二手商品的数据结构interfaceSecondHandItem{id:number;title:string;description:string;price:number;originalPrice:number;category:string;condition:string;seller:string;contact:string;status:string;isCollected:boolean;publishTime:string;}字段说明如下id商品的唯一编号title物品标题description物品详细描述price出售价格originalPrice原价category物品分类condition新旧程度seller卖家姓名contact联系方式status商品状态在售/已售出isCollected是否已收藏publishTime发布时间初始化页面状态使用State保存输入内容、分类选择、筛选条件和排序方式StateprivatetitleText:string;StateprivatedescriptionText:string;StateprivatepriceText:string;StateprivateoriginalPriceText:string;StateprivatecontactText:string;StateprivatesellerText:string;Stateprivatecategory:string数码产品;Stateprivatecondition:string九成新;StateprivatefilterType:string全部;StateprivatesortType:string默认;StateprivatenextId:number6;准备一些初始数据让应用运行后可以直接展示完整效果Stateprivateitems:SecondHandItem[][{id:1,title:iPad Air 4 64G 银色,description:自用一年无磕碰带原装充电器和保护套,price:2200,originalPrice:4799,category:数码产品,condition:九成新,seller:陈同学,contact:微信chen2026,status:在售,isCollected:false,publishTime:2026-07-15},{id:2,title:高等数学同济第七版,description:上下册两本有少量笔记不影响使用,price:15,originalPrice:80,category:书籍教材,condition:八成新,seller:刘同学,contact:QQ123456789,status:在售,isCollected:true,publishTime:2026-07-16},{id:3,title:捷安特山地车,description:ATX660骑了两年刹车刚换过,price:450,originalPrice:1298,category:生活用品,condition:七成新,seller:周同学,contact:电话139****1234,status:已售出,isCollected:false,publishTime:2026-07-10},{id:4,title:罗技G304无线鼠标,description:白色用了三个月包装齐全,price:120,originalPrice:229,category:数码产品,condition:九五新,seller:吴同学,contact:微信wuxiaoming,status:在售,isCollected:false,publishTime:2026-07-17}];发布二手物品用户填写物品信息后可以发布新的二手商品privateaddItem():void{consttitle:stringthis.titleText.trim();constprice:numberparseInt(this.priceText);constseller:stringthis.sellerText.trim();constcontact:stringthis.contactText.trim();if(title.length0||isNaN(price)||seller.length0||contact.length0){return;}constoriginalPrice:numberthis.originalPriceText?parseInt(this.originalPriceText):price*2;consttodaynewDate();constdateStr${today.getFullYear()}-${String(today.getMonth()1).padStart(2,0)}-${String(today.getDate()).padStart(2,0)};constitem:SecondHandItem{id:this.nextId,title,description:this.descriptionText.trim(),price,originalPrice,category:this.category,condition:this.condition,seller,contact,status:在售,isCollected:false,publishTime:dateStr};this.items[item,...this.items];this.nextId1;this.titleText;this.descriptionText;this.priceText;this.originalPriceText;this.sellerText;this.contactText;}新发布的物品默认处于在售状态。商品状态流转二手商品按照以下流程处理在售 - 已售出使用以下方法更新商品状态privatemarkAsSold(id:number):void{this.itemsthis.items.map((item:SecondHandItem){if(item.idid){return{id:item.id,title:item.title,description:item.description,price:item.price,originalPrice:item.originalPrice,category:item.category,condition:item.condition,seller:item.seller,contact:item.contact,status:已售出,isCollected:item.isCollected,publishTime:item.publishTime};}returnitem;});}在售状态点击标记已售后变为已售出状态。收藏与取消收藏用户可以收藏感兴趣的物品privatetoggleCollect(id:number):void{this.itemsthis.items.map((item:SecondHandItem){if(item.idid){return{id:item.id,title:item.title,description:item.description,price:item.price,originalPrice:item.originalPrice,category:item.category,condition:item.condition,seller:item.seller,contact:item.contact,status:item.status,isCollected:!item.isCollected,publishTime:item.publishTime};}returnitem;});}点击收藏按钮可以切换收藏状态。筛选和排序物品页面支持按照分类和状态筛选并支持价格排序privategetFilteredItems():SecondHandItem[]{letresult[...this.items];if(this.filterType在售){resultresult.filter((item:SecondHandItem)item.status在售);}elseif(this.filterType已售出){resultresult.filter((item:SecondHandItem)item.status已售出);}elseif(this.filterType我的收藏){resultresult.filter((item:SecondHandItem)item.isCollected);}elseif(this.filterType!全部){resultresult.filter((item:SecondHandItem)item.categorythis.filterType);}if(this.sortType价格从低到高){result.sort((a,b)a.price-b.price);}elseif(this.sortType价格从高到低){result.sort((a,b)b.price-a.price);}returnresult;}筛选按钮封装如下BuilderFilterButton(text:string){Button(text).height(32).padding({left:12,right:12}).fontSize(12).fontColor(this.filterTypetext?Color.White:#344054).backgroundColor(this.filterTypetext?#EA580C:#FFF7ED).borderRadius(16).onClick((){this.filterTypetext;});}选择新旧程度页面支持多种新旧程度选择BuilderConditionButton(text:string){Button(text).height(34).layoutWeight(1).fontSize(12).fontColor(this.conditiontext?Color.White:#344054).backgroundColor(this.conditiontext?#EA580C:#F3F4F6).borderRadius(8).onClick((){this.conditiontext;});}不同新旧程度使用橙色主题色高亮显示。统计商品数据使用filter统计各类商品数量privategetCount(filter:string):number{if(filter在售){returnthis.items.filter((item:SecondHandItem)item.status在售).length;}if(filter已售出){returnthis.items.filter((item:SecondHandItem)item.status已售出).length;}if(filter收藏){returnthis.items.filter((item:SecondHandItem)item.isCollected).length;}returnthis.items.length;}顶部统计区域展示全部商品、在售、已售出和收藏数量this.StatCard(全部商品,${this.getCount(全部)},#EA580C,#FFF7ED);this.StatCard(正在出售,${this.getCount(在售)},#059669,#ECFDF5);this.StatCard(我的收藏,${this.getCount(收藏)},#DC2626,#FEF2F2);设置状态颜色不同商品状态使用不同颜色privategetStatusColor(status:string):ResourceColor{if(status在售){return#059669;}return#6B7280;}privategetConditionColor(condition:string):ResourceColor{if(condition全新||condition九五新){return#059669;}if(condition九成新||condition八成新){return#D97706;}return#DC2626;}颜色含义如下绿色在售/成色较新橙色成色一般红色成色较旧/收藏橙色页面主题色删除商品记录已下架或过期的商品可以删除privatedeleteItem(id:number):void{this.itemsthis.items.filter((item:SecondHandItem)item.id!id);}删除后商品列表和顶部统计数据会自动更新。使用列表展示商品使用List和ForEach渲染筛选后的商品List({space:12}){ForEach(this.getFilteredItems(),(item:SecondHandItem){ListItem(){this.ItemCard(item)}},(item:SecondHandItem)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状态管理数字输入和价格处理List和ForEach列表渲染map和filter数组操作多条件筛选和排序收藏状态切换自定义Builder组件HarmonyOS 商品卡片布局后续还可以加入商品图片上传、聊天功能、议价功能、同城面交定位、信用评价系统、搜索功能和交易担保等功能。
