HarmonyOS ArkTS 实战：实现一个购物清单与价格比较应用

HarmonyOS ArkTS 实战实现一个购物清单与价格比较应用项目效果你是否经历过“进了超市就失忆”——总是忘记比较价格、漏买或超支 本文手把手带你用 HarmonyOS ArkTS 实现一个功能完善的购物清单与价格比较应用。它会帮你记录、比价、分类管理并且用清爽的橙色购物主题优化交互体验。项目使用 DevEco Studio 开发适配 API 24 及以上版本。运行效果功能介绍实际场景你可以把这篇教程用在“家庭每周采购”“合租室友拼单”甚至是“市场调研比价”。 下面这些功能都已经在代码里直接可跑✅ 购物商品添加✅ 商品勾选已购买✅ 价格记录✅ 总价计算✅ 商品分类✅ 数量调整✅ 价格比较✅ 购物历史✅ 常用商品收藏✅ 预算设置✅ 超支提醒✅ 清单分享✅ 超市选择✅ 优惠券记录✅ 购物统计- ✅ 购物商品添加✅ 商品勾选已购买✅ 价格记录✅ 总价计算✅ 商品分类✅ 数量调整✅ 价格比较✅ 购物历史✅ 常用商品收藏✅ 预算设置✅ 超支提醒✅ 清单分享✅ 超市选择✅ 优惠券记录✅ 购物统计定义数据结构interfaceShoppingItem{id:number;name:string;price:number;quantity:number;category:string;isBought:boolean;note:string;}初始化页面状态Stateprivateitems:ShoppingItem[][{id:1,name:牛奶,price:12.5,quantity:2,category:饮品,isBought:true,note:纯牛奶},{id:2,name:面包,price:8,quantity:1,category:食品,isBought:false,note:},{id:3,name:苹果,price:15,quantity:3,category:水果,isBought:false,note:红富士},];StateprivatenewItemName:string;核心功能方法// 添加新商品privateaddItem():void{if(!this.newItemName.trim())returnthis.items[...this.items,{id:Date.now(),name:this.newItemName.trim(),price:0,quantity:1,category:未分类,isBought:false,note:}]this.newItemName}// 切换已购状态privatetoggleComplete(id:number):void{this.itemsthis.items.map(ii.idid?{...i,isBought:!i.isBought}:i)}// 删除商品privatedeleteItem(id:number):void{this.itemsthis.items.filter(ii.id!id)}// 更新商品数量privateupdateQuantity(id:number,quantity:number):void{if(quantity1)returnthis.itemsthis.items.map(ii.idid?{...i,quantity}:i)}// 计算总价已购商品privategetTotalPrice():string{returnthis.items.filter(ii.isBought).reduce((sum,i)sumi.price*i.quantity,0).toFixed(2)}Builder 可复用组件BuilderItemCard(item:any){Row().width(100%).padding(14).backgroundColor(Color.White).borderRadius(12)}完整build()页面布局build(){Stack({alignContent:Alignment.Bottom}){Column(){Row(){Text(购物清单).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#1F2937)Blank()Text(总计: ¥${this.items.filter(ii.isBought).reduce((sum,i)sumi.price*i.quantity,0).toFixed(2)}).fontSize(16).fontColor(#C2410C).fontWeight(FontWeight.Medium)}.width(100%).padding(20)Scroll(){Column({space:10}){ForEach(this.items,(item:ShoppingItem){Row({space:12}){Text(item.isBought?✅:⬜).fontSize(20).onClick((){this.itemsthis.items.map(ii.iditem.id?{...i,isBought:!i.isBought}:i)})Column({space:4}){Text(item.name).fontSize(15).fontColor(item.isBought?#9CA3AF:#1F2937).decoration({type:item.isBought?TextDecorationType.LineThrough:TextDecorationType.None})Text(x${item.quantity}·${item.category}).fontSize(12).fontColor(#9CA3AF)}.alignItems(HorizontalAlign.Start).layoutWeight(1)Text(¥${(item.price*item.quantity).toFixed(2)}).fontSize(15).fontColor(#C2410C).fontWeight(FontWeight.Medium)}.width(100%).padding(14).backgroundColor(Color.White).borderRadius(12)})}.width(100%).padding({left:20,right:20,bottom:100})}.layoutWeight(1).scrollBar(BarState.Off)}.width(100%).height(100%).backgroundColor(#FFF7ED)Row({space:10}){TextInput({placeholder:添加商品}).layoutWeight(1).height(48).backgroundColor(Color.White).borderRadius(24)Button().width(48).height(48).backgroundColor(#C2410C).borderRadius(24)}.width(90%).margin({bottom:20})}.width(100%).height(100%)}页面设计说明为了营造“橙色购物”的轻快氛围整个应用以#C2410C为主色调并渐变到#FB923C背景使用极浅的暖色#FFF7ED来降低视觉疲劳。 卡片式设计配合圆角和阴影让每个商品看起来就像一张便利贴——已完成的任务会划掉并变灰未完成的任务会醒目地显示价格和数量。SDK配置API 24compatibleSdkVersion: “6.1.1(24)”运行项目将代码复制到 entry/src/main/ets/pages/Index.ets 即可运行。项目总结本项目从零到一实现了购物清单与价格比较的完整功能覆盖数据结构、状态管理、UI 布局和可复用组件。 你学到了什么ArkTS 声明式 UI 与State状态驱动ForEach动态列表与交互事件处理购物车逻辑、价格计算、勾选状态、清单管理Builder自定义可复用组件的拆分方式 下一步可以做什么条码扫描结合相机和 ML Kit 实现扫码录入价格历史用 RelationalStore 记录每次采购价格多平台比价对接公开价格 API展示不同超市的价格差异优惠券提醒根据商品自动提醒可用优惠券拼单与 AA 记账多人协同编辑清单并自动分账希望这篇文章能帮你用 HarmonyOS 写出真正能帮自己和家人省钱省心的好工具 ✨