鸿蒙开发实战：购物新体验，购物车列表

今天来开发商城的一个核心功能，购物车列表，也是主要的功能之一。

先看效果：购物车之所以是核心，是因为商城购买需要添加购物车，加入购物车是一个必不可少的功能，同时也是比较复杂的功能，包括，商品的增加和减少，选择和取消选择，以及滑动删除。

看起来复杂，我们今天来一点一点的拆解实现。

之前说到过容器组件List列表组件的基本使用方式：

List(){ListItem(){ Text('沉默的闪客').width('100%').height(50).fontSize(25).textAlign(TextAlign.Center).backgroundColor('#999999')}ListItem(){ Text('沉默的闪客').width('100%').height(50).fontSize(25).textAlign(TextAlign.Center).backgroundColor('#ff49a938')}ListItem(){ Text('沉默的闪客').width('100%').height(50).fontSize(25).textAlign(TextAlign.Center).backgroundColor('#ffef3f3f')}ListItem(){ Text('沉默的闪客').width('100%').height(50).fontSize(25).textAlign(TextAlign.Center).backgroundColor('#ffeee537')}}

上面的List中包括多个ListItem 最后组成了一个列表，那么，有没有办法动态生成ListItem 实现列表显示。

现在我们需要有一个数组：

private shopList: string[] = ['华为P40 5G手机', '华为Meta 60 5G手机', '华为Nova 5G手机', '荣耀 5G手机']

下面就需要考虑怎么展示列表，做过开发的友友 会想到遍历数据，对就是需要For循环遍历出来每一个数组中的数据。

鸿蒙中可以使用ForEach解决。代码如下：

List({space:2}){// 间距ForEach(this.shopList, (item:string)=>{ListItem(){ Text(item).width('100%').height(50).fontSize(25).textAlign(TextAlign.Center).backgroundColor('#999999')}}, (item:string)=>JSON.stringify(item))}

实现效果：

先看可以看到数据可以循环遍历 动态显示了，居中是因为colomn布局容器 添加了justifyContent属性 设置了居中对齐，如果要巨距顶部对齐，可以设置成.justifyContent(FlexAlign.Start)。

现在列表看起来内容不一样 我们来做一下样式调整，添加每一条数据的边距和圆角背景

对ListItem中的组件做一些样式调整：添加了背景和圆角

Column(){List({space:15}){// 间距ForEach(this.shopList, (item:string)=>{ListItem(){Flex({ direction: FlexDirection.Row,alignItems: ItemAlign.Center }) {Image($r('app.media.icon')).height(80).width(80).objectFit(ImageFit.Cover).margin({ left: 10 })Text(item).fontSize(20)}.padding({left: 10,right: 10,top:10,bottom:10}).margin({left:10,right:10}).borderRadius(20).backgroundColor(Color.White)}}, (item:string)=>JSON.stringify(item))}}.padding({top:15}).backgroundColor('#e1e1e1').height('100%').justifyContent(FlexAlign.Start)

是不是来起来一个列表已经基本好了，到目前智能说，学会了使用列表List和布局的使用，下面增加难度，开始开发里面的多层布局和所有对齐显示。

如果要实现全部页面信息的展示，我们需要把数组变成一个购物车列表对象数组，里面的数据就是购物车列表列表，下面来看看如何实现？​​​​​​​

const shopCartData: Product[] = [{price: 6399,name: "XXXX40 Pro",description: "XXXX40 Pro 5G手机"},{price: 6588,name: "Meta 60 Pro",description: "PXX40 Pro 5G手机 支持XXXOS"},{price: 6588,name: "荣耀 Pro",description: "PXX40 Pro 5G手机 支持XXXOS"},{price: 6588,name: "Nova Pro",description: "PXX40 Pro 5G手机 支持XXXOS"}]

上面的数据有了，这时候再用刚才的ForEach循环去展示的时候，item不再是一个信息，而是一个对象了。

ForEach循环的就是一个对象，我们再从对象中获取每一个信息，比如商品名字，改动数据源，获取商品名称：

为了更好的区分数据和逻辑，添加一个数据对象，如下：​​​​​​​

class Product {price: number;name: string;description: string;constructor(price: number,name: string,description: string) {this.price = pricethis.name = namethis.description = description}}const shopCartData: Product[] = [{price: 6399,name: "XXXX40 Pro",description: "XXXX40 Pro 5G手机"},{price: 6588,name: "Meta 60 Pro",description: "PXX40 Pro 5G手机 支持XXXOS"},{price: 6588,name: "荣耀 Pro",description: "PXX40 Pro 5G手机 支持XXXOS"},{price: 6588,name: "Nova Pro",description: "PXX40 Pro 5G手机 支持XXXOS"}]export { Product,shopCartData }

注意：ForEach(this.shopList, (item: Product) => {} 循环的数据变了！！！

别放松，现在还不是轻敌的时候，现在只是简单的实现了，要做到效果还需要对界面就行布局优化。

还记得上一篇布局的方式吧 ，基本也就是 竖直，水平，堆叠，弹性 几种布局组合：

从界面下分析如下，

1，每条数据总体是水平布局，选择框，图片，【名称，类型，价格】 是竖直布局。

2，价格，名称，详情是竖直布局

3，价格和数据加减是水平布局

我们把菜谱列表中的单个元素拿出来分析一下：

看红色框，我们可以把所有组件分成三个部分，所以它整体上是一个水平布局，因此最外部的容器可以这样写：​​​​​​​

Flex({ direction: FlexDirection.Row,alignItems: ItemAlign.Center }) {// 选择框Checkbox// 图片Image// 内容信息Column(){// 右侧竖直布局}.alignItems(HorizontalAlign.Start)}.padding({ left: 10, right: 10, top: 10, bottom: 10 }).margin({ left: 10, right: 10 }).borderRadius(20).backgroundColor(Color.White)

再来分析右侧的组件，看蓝色框，同样可以分为三个部分，它是一个垂直布局，所以右侧是一个Column:​​​​​​​

Flex({ direction: FlexDirection.Row,alignItems: ItemAlign.Center }) {// 选择框Checkbox// 图片Image// 内容信息Column(){  // 右侧竖直布局  Text  Text  Row(){    Text    Text  }}.alignItems(HorizontalAlign.Start)}.padding({ left: 10, right: 10, top: 10, bottom: 10 }).margin({ left: 10, right: 10 }).borderRadius(20).backgroundColor(Color.White)

在蓝色框内分别有两个元素，再逐级分析下去，蓝色框中的绿色框是一个水平布局，我们的大致框架就出来了。​​​​​​​

Flex({ direction: FlexDirection.Row,alignItems: ItemAlign.Center }) {// 选择框Checkbox// 图片Image// 内容信息Column(){// 右侧竖直布局Text // 名称Text //详情Row(){Text // 价格Text //数量}}.alignItems(HorizontalAlign.Start)}.padding({ left: 10, right: 10, top: 10, bottom: 10 }).margin({ left: 10, right: 10 }).borderRadius(20).backgroundColor(Color.White)

这样再把数组中的数据展示上去，在进行一些样式调整，我们的购物商品列表基本上就出来了。

不知道是否注意到 我们整体布局使用的是Flex 而不是Column，官方文档说 Flex会做二次渲染，消耗性能，推荐使用Column，我建议大家使用Flex，使用起来好控制，可以把上面的Column和Row都换成Flex的方式，上面的代码就变成了这样：​​​​​​​

Flex({ direction: FlexDirection.Row,alignItems: ItemAlign.Center }) {Checkbox().width(24).height(24).selectedColor('#ed6f21').onClick(() => {})Image($r('app.media.product001')).height(80).width(80).objectFit(ImageFit.Cover).margin({ left: 10 })Column(){Text(item.name).fontSize(18)Text(item.description).width('100%').fontSize(14).margin({top:5,bottom:5}).fontColor('#999999')Row(){Text(item.price+"").fontSize(17).fontColor('#ffef2222')Blank()Image($r('app.media.ic_decrease')).width(24).height(24)Text('100').fontSize(17).margin({left:5,right:5})Image($r('app.media.ic_increase')).width(24).height(24)}.width('100%')}.layoutWeight(1).margin({left:10}).alignItems(HorizontalAlign.Start)}.padding({ left: 10, right: 10, top: 10, bottom: 10 }).margin({ left: 10, right: 10 }).borderRadius(20).backgroundColor(Color.White)

运行看一下：

看到效果，有点小激动啊，已经基本和设计图一样了啊，但是还有一点问题，数量添加和减少，怎么做呢。

这里要讲一下@State装饰器，通过数据状态，更新界面：

定义一个变量 通过@State装饰器 ：@State sum: number= 0

在增加和减少 按钮操作 更新sum数据：

.onClick(() => {  this.sum = this.sum+ 1;})

这样一个购物车列表就完成了。

写在最后

鸿蒙开发还是比较容易上手的，大家如果对鸿蒙开发感兴趣，闪客以后可以分享更多相关教程实战案例，欢迎关注！

简单说下这个星球能给大家提供什么：
 

1、不断分享如何开发鸿蒙应用，实战项目，上架应用。

2、分享鸿蒙开发的入门开发方法、项目经验。

3、探讨未来关于鸿蒙的机遇和发展方向，共同成长。

4、帮助大家解决鸿蒙开发中遇到的问题。

星球福利：

1、加入星球，就送入门到实战的已有课程。

2、邀请你加入会员交流群。

3、支持零基础一对一辅导。