当前位置:   article > 正文

鸿蒙开发实战:购物新体验,购物车列表_鸿蒙开发实战:购物新体验,购物车列表

鸿蒙开发实战:购物新体验,购物车列表

图片

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

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

图片

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

之前说到过容器组件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、支持零基础一对一辅导。

图片

图片

图片

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/代码探险家/article/detail/757240
推荐阅读
相关标签
  

闽ICP备14008679号