【鸿蒙实战开发】HarmonyOS实现购物车模块
背景最近逛论坛和各种技术站发现大家对商城类应用搜索的频率非常高，在商城开发范畴深耕多年的我为了造福一方码农，不得不脱手相助了，那么今天就为大家带来商城应用开发中比较重要的一个功能模块，就是我们的购物车模块，购物车模块主要负责已添加商品的数目以及选中状态的查看以及我们商品价格的盘算，首先让我们看效果图
https://i-blog.csdnimg.cn/blog_migrate/7c29afa9e9bfa41b1cdf2fa70d80397d.png
可以看到这是某平台的购物车效果图，分别有商品选择和价格盘算两个模块。在其他平台想必大家开发起来早已经烂熟于心，那在我们的HarmoneyOS上又该如何实现呢？
开发准备
硬件：
支持api12的HarmoneyOS NEXT体系的手机或者平板
软件：
DevEco Studio NEXT 5.0.3.403
Api 12语言： 方舟编程语言（ArkTs）
UI开发框架：
方舟UI框架，ArkUI
开发分析
购物车有商品列表和价格盘算，所以我们的组件结构是在自界说组件中使用list列表实现商品分类，在自界说价格盘算组件中去实时盘算列表中随动的商品价格
代码实现
首先界说好我们必要的变量，一个商品总价和商品流的详情，因为我们必要改变数组中对象的数据所以我们必要用到@ObjectLink + @Observed ，@Observed声明的实体类如下
@State allMoney:number=0//已选商品总价
@Observed
export class Product {
checked: boolean;
name: string;
price: number;
num: number;
id: number;
img: string;
constructor(
checked: boolean,
name: string,
price: number,
num: number,
id: number,
img: string
) {
this.checked = checked;
this.name = name;
this.price = price;
this.num = num;
this.id = id;
this.img = img;
}
}
然后我们在页面的生命周期中填凑数据
aboutToAppear(): void {
let product1: Product = new Product(true,
坚果',
9,
1,
0,
'https://tse2-mm.cn.bing.net/th/id/OIP-C.2gR5bCXHLK6Pi4CMzt5XnQHaE8?w=372&h=203&c=7&r=0&o=5&dpr=2&pid=1.7')
let product2: Product = new Product( true,
小零食',
19,
1,
0,
'https://tse2-mm.cn.bing.net/th/id/OIP-C.2gR5bCXHLK6Pi4CMzt5XnQHaE8?w=372&h=203&c=7&r=0&o=5&dpr=2&pid=1.7')
this.productList.push(product1)
this.productList.push(product2)
this.allMoney= this.areAllCheckTrue(this.productList)
}
数据准备好后使用list组件举行数据的填充并且参加结构展示数据（代码如下）
List(){
ForEach(this.productList,(item:ESObject,index:number)=>{
ListItem(){
//自定义组件
itemList({item:item,index:index,call:()=>{
this.allMoney= this.areAllCheckTrue(this.productList)
}})
}
})
}
.margin({top:10})
条目信息我们创建一个自界说组件来实现（代码如下）
@Component
exportstruct itemList{
@ObjectLink item:Product
@State index:number=0;
call:()=>void=()=>{}
build() {
Row(){
Checkbox({ name: 'checkbox1', group: 'checkboxGroup'+this.index })
.select(true)
.selectedColor(0xed6f21)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
this.item.checked=value
this.call()
console.info('Checkbox1 change is' + value)
})
Image( this.item.img)
.height(90)
.width(90)
Column(){
Text( this.item.name)
.fontSize(16)
.fontWeight(FontWeight.Bold)
Text(){
Span("¥")
.fontColor(Color.Red)
Span(String( this.item.price))
.fontColor(Color.Red)
}
.margin({top:40})
}
.margin({left:10})
Blank()
Row(){
Button("+")
.width(40)
.height(20)
.fontColor(Color.White)
.onClick(()=>{
this.item.num++
this.call()
})
Text(String( this.item.num))
Button("-")
.width(40)
.height(20)
.fontColor(Color.White)
.onClick(()=>{
this.item.num--
this.call()
})
}
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
}
这时候我们的购物车数据就表现出来了（效果如下）
https://i-blog.csdnimg.cn/blog_migrate/0799fe86fcca13e8e021a527add223ec.png
接下来实现底部的价格盘算模块
Row(){
总价：")
Text(String(this.allMoney))
.fontSize(20)
.fontColor(Color.Red)
Blank()
结算")
.fontColor(Color.White)
.backgroundColor(Color.Red)
}
.margin({bottom:10})
.padding({left:10,right:10})
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
生存后效果如下
https://i-blog.csdnimg.cn/blog_migrate/57dadbb45d7116d53d342fd3fc0feade.png
然后界说价格盘算的方法实现
areAllCheckTrue(products: Product[]): number {
let all:number=0
for (const product of products) {
if (product.checked) {
all+=product.price*product.num
}
}
returnall;
}
通过遍历数组的数据拿到商品价格与数目的效果，然后在页面上赋值给我们界说的总价参数。
https://i-blog.csdnimg.cn/blog_migrate/0128fe97b6d16d50acd3853fd8711d07.png
现在购物车的选择，添加，价格盘算就实现啦
写在末了
●如果你以为这篇内容对你还蛮有帮助，我想约请你帮我三个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing
页:
[1]