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

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

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

1. Column{
2.     Row{
3.         //导航栏
4.     }
5.     .width(100.percent)
6.     .height(60)
7.     List{
8.         //购物车列表
9.     }
10.     .width(100.percent)
11.     .layoutWeight(1)
12.     Row{
13.         //结算栏
14.     }
15.     .width(100.percent)
16.     .height(45)
17. }
18. .width(100.percent)
19. .height(100.percent)

复制代码

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

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

1. @Builder func itemHead(text:String) {
2.     Row{
3.         Text(text)
4.         .fontSize(15)
5.         .backgroundColor(Color.WHITE)
6.         .padding(10)
7.           Image(@r(app.media.righticon))
8.             .height(18)
9.             .width(18)
10.             .objectFit(ImageFit.Contain)
11.             .margin(left:-5)
12.     }
13.     .width(100.percent)
14.     .height(35)
15.     .alignItems(VerticalAlign.Center)
16. }

复制代码

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

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

复制代码

然后就是列表内容部分，循环列表内容我们只看其中一个就行了。
同样先把它简单的分析一下，大家可以把它分为两部分或者三部分，拆分开来就会比较简单了。
要注意的是这部分内容需要横向占满整个屏幕，我们同样可以使用layoutWeight来实现。
下面为大家贴上列表内容加上循环遍历的实现代码。仓颉Foreach写法比较不同，需要慢慢习惯：

1. @State
2. var carList:ObservedArrayList<CarItem> = ObservedArrayList<CarItem>(
3.     CarItem('纯棉牛津纺舒适基础长袖衬衫',@r(app.media.good1), '100',1),
4.     CarItem('顺滑抗皱女士通勤高腰显瘦阔腿休闲裤',@r(app.media.good2), '100',1),
5.     CarItem('女士高腰牛仔裤',@r(app.media.good3), '100',1),
6.     CarItem('女士多彩牛仔裤',@r(app.media.good4), '100',1)
7. )

复制代码

1. ForEach(this.carList,
2.     itemGeneratorFunc:{
3.         item:CarItem, index: Int64 => ListItem {
4.             Row(8){
5.                 Image(@r(app.media.unselect))
6.                 .width(17)
7.                 .height(17)
8.         Image(item.getCover())
9.         .width(90)
10.         .height(90)
11.         .borderRadius(6)
12.         Column {
13.             Column(5){
14.                 Text(item.getName())
15.                 .fontSize(16)
16.                 .fontColor(Color.BLACK)
17.                 Text('天蓝色，XL（180）')
18.                 .fontSize(14)
19.                 .fontColor(Color.GRAY)
20.                 .padding(4)
21.                 .backgroundColor(Color(241, 241, 241, alpha: 1.0))
22.                 .borderRadius(4)
23.             }
24.             .alignItems(HorizontalAlign.Start)
25.             Row {
26.                 Row{
27.                     Text('¥')
28.                     .fontColor(Color.RED)
29.                     .fontSize(13)
30.                     Text(item.getPrice())
31.                     .fontSize(18)
32.                     .fontColor(Color.RED)
33.                     .fontWeight(FontWeight.Bold)
34.                 }
35.                 .alignItems(VerticalAlign.Bottom)
36.                 Row (6){
37.                     Text('-')
38.                     .fontColor(Color(74, 74, 74, alpha: 1.0))
39.                     .fontSize(16)
40.                      Text(item.getCount().toString())
41.                      .fontSize(14)
42.                      .fontColor(Color.BLACK)
43.                      .padding(4)
44.                      .backgroundColor(Color(241, 241, 241, alpha: 1.0))
45.                     .textAlign(TextAlign.Center)
46.                     .width(40)
47.                     .height(28)
48.                     .borderRadius(6)
49.                     Text('+')
50.                     .fontColor(Color(74, 74, 74, alpha: 1.0))
51.                     .fontSize(16)
52.                 }
53.                 .alignItems(VerticalAlign.Center)
54.             }
55.             .alignItems(VerticalAlign.Center)
56.             .justifyContent(FlexAlign.SpaceBetween)
57.             .width(100.percent)
58.         }
59.         .layoutWeight(1)
60.         .alignItems(HorizontalAlign.Start)
61.          .height(90)
62.          .justifyContent(FlexAlign.SpaceBetween)
63.      }
64.       .width(100.percent)
65.       .height(110)
66.         }
67.     })

复制代码

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

1. Row(6){
2.         Row(){
3.         Text('合计')
4.         .fontSize(13)
5.         .fontColor(Color.BLACK)
6.         Text('¥')
7.             .fontColor(Color.RED)
8.             .fontSize(13)
9.             .margin(left:5)
10.                             Text('0')
11.                             .fontSize(18)
12.                             .fontColor(Color.RED)
13.                             .fontWeight(FontWeight.Bold)
14.     }
15.     .alignItems(VerticalAlign.Bottom)
16.     Text('结算')
17.     .fontColor(Color.WHITE)
18.     .backgroundColor(Color.RED)
19.     .width(100)
20.     .height(38)
21.     .borderRadius(6)
22.         .textAlign(TextAlign.Center)
23.     }

复制代码

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！