鸿蒙仓颉语言开发实战教程：购物车页面

大家上午好，仓颉语言商城应用的开发进程已经过半，不知道大家通过这一系列的教程对仓颉开发是否有了进一步的了解。今天要分享的购物车页面：

看到这个页面，我们首先要对它简单的分析一下。这个页面一共分为三部分，分别是导航栏、购物车列表和底部的结算栏。也能它们是column布局，那么怎么样让这三部分刚好撑满整个页面，有一个简单的办法：给导航栏和结算栏一个固定的高度，然后给List组件设置layoutWeight(1)属性即可。写一个简单的页面结构:

Column{Row{//导航栏}.width(100.percent).height(60)List{//购物车列表}.width(100.percent).layoutWeight(1)Row{//结算栏}.width(100.percent).height(45)
}
.width(100.percent)
.height(100.percent)

购物车列表

购物车列表毫无疑问使用List组件，今天的List组件比之前多了一些内容，就是店铺名字这部分的内容，我们使用List中的header来实现。

我首先写下header部分的内容，并自定义一个组件itemHead：

@Builder func itemHead(text:String) {Row{Text(text).fontSize(15).backgroundColor(Color.WHITE).padding(10)Image(@r(app.media.righticon)).height(18).width(18).objectFit(ImageFit.Contain).margin(left:-5)}.width(100.percent).height(35).alignItems(VerticalAlign.Center)
}

在List中使用这个组件，并传入参数，就是店铺的名字：

List(space:12) {ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('幽蓝旗舰店')})){})
}

然后就是列表内容部分，循环列表内容我们只看其中一个就行了。

同样先把它简单的分析一下，大家可以把它分为两部分或者三部分，拆分开来就会比较简单了。

要注意的是这部分内容需要横向占满整个屏幕，我们同样可以使用layoutWeight来实现。

下面为大家贴上列表内容加上循环遍历的实现代码。仓颉Foreach写法比较不同，需要慢慢习惯：

ForEach(this.carList,itemGeneratorFunc:{item:CarItem, index: Int64 => ListItem {Row(8){Image(@r(app.media.unselect)).width(17).height(17)Image(item.getCover()).width(90).height(90).borderRadius(6)Column {Column(5){Text(item.getName()).fontSize(16).fontColor(Color.BLACK)Text('天蓝色，XL（180）').fontSize(14).fontColor(Color.GRAY).padding(4).backgroundColor(Color(241, 241, 241, alpha: 1.0)).borderRadius(4)}.alignItems(HorizontalAlign.Start)Row {Row{Text('¥').fontColor(Color.RED).fontSize(13)Text(item.getPrice()).fontSize(18).fontColor(Color.RED).fontWeight(FontWeight.Bold)}.alignItems(VerticalAlign.Bottom)Row (6){Text('-').fontColor(Color(74, 74, 74, alpha: 1.0)).fontSize(16)Text(item.getCount().toString()).fontSize(14).fontColor(Color.BLACK).padding(4).backgroundColor(Color(241, 241, 241, alpha: 1.0)).textAlign(TextAlign.Center).width(40).height(28).borderRadius(6)Text('+').fontColor(Color(74, 74, 74, alpha: 1.0)).fontSize(16)}.alignItems(VerticalAlign.Center)}.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.SpaceBetween).width(100.percent)}.layoutWeight(1).alignItems(HorizontalAlign.Start).height(90).justifyContent(FlexAlign.SpaceBetween)}.width(100.percent).height(110)}})

结算栏

相比购物车列表，结算栏的内容就比较简单了，使用几个Row容器就能实现：

Row(6){Row(){Text('合计').fontSize(13).fontColor(Color.BLACK)Text('¥').fontColor(Color.RED).fontSize(13).margin(left:5)Text('0').fontSize(18).fontColor(Color.RED).fontWeight(FontWeight.Bold)}.alignItems(VerticalAlign.Bottom)Text('结算').fontColor(Color.WHITE).backgroundColor(Color.RED).width(100).height(38).borderRadius(6).textAlign(TextAlign.Center)}

以上就是购物车页面开发的内容分享，感谢阅读。#HarmonyOS语言##仓颉##购物#​