鸿蒙Next仓颉语言开发实战教程：订单列表

大家上午好，最近不断有友友反馈仓颉语言和ArkTs很像，所以要注意不要混淆。今天要分享的是仓颉语言开发商城应用的订单列表页。

首先来分析一下这个页面，它分为三大部分，分别是导航栏、订单类型和订单列表部分。
导航栏由返回按钮和搜索框组成，这里要注意组件横向占满屏幕时要使用layoutWeight属性，导航栏部分的实现代码如下：

1. Row(8) {
2.     Image(@r(app.media.back))
3.     .width(22)
4.     .height(22)
5.     .onClick({evet => Router.back()})
6.     Search(placeholder: "搜索").height(38).layoutWeight(1)
7.         .onClick({evet => })
8. }
9. .width(100.percent)
10. .height(60)
11. .padding(right: 12, left: 12)
12. .alignItems(VerticalAlign.Center)

复制代码

订单类型应该是一个滚动的横条，虽然它现在没有占满整个屏幕，但是为了适配更多尺寸和类型的屏幕，我们还是要使用Scroll。里面的内容使用foreach循环添加，大家要慢慢习惯仓颉中Foreach的写法，另外这里定一个变量orderIndex和指定当前选中的订单类型，这一部分的具体实现代码如下：

1. Scroll{
2.     Row(25){
3.     ForEach(this.orderTypeList, itemGeneratorFunc: {item:String,index:Int64 =>
4.                 if(this.orderIndex == index){
5.                      Text(item)
6.                      .fontColor(Color(215, 68, 62, alpha: 1.0))
7.                      .fontSize(17)
8.                      .fontWeight(FontWeight.Bold)
9.                 }else {
10.                  Text(item)
11.                  .fontColor(Color.GRAY)
12.                  .fontSize(16)
13.                 .onClick({evet => this.orderIndex = index})
14.                 }
15.             })
16. }
17. .width(100.percent)
18. .height(40)
19. }
20. .height(40)
21. .padding( right: 12, left: 12)
22. .scrollable(ScrollDirection.Horizontal)
23. .scrollBar(BarState.Off)
24. .scrollBarColor(Color.GRAY)
25. .scrollBarWidth(50.px)

复制代码

最后是订单列表部分，很明显是一个List组件，依然使用layoutWeight占满剩余屏幕。然后店铺名字和发货状态部分使用List的header来实现，

1. @Builder func itemHead(text:String) {
2.     Row{
3.         Row{
4.         Text(text)
5.         .fontSize(15)
6.         .fontWeight(FontWeight.Bold)
7.         .backgroundColor(Color.WHITE)
8.           Image(@r(app.media.righticon))
9.             .height(18)
10.             .width(18)
11.             .objectFit(ImageFit.Contain)
12.         }
13.         Text('卖家已发货')
14.         .fontColor(Color.RED)
15.         .fontSize(14)
16.     }
17.     .width(100.percent)
18.     .height(35)
19.     .justifyContent(FlexAlign.SpaceBetween)
20.     .alignItems(VerticalAlign.Center)
21.     .padding(left:12,right:12)
22. }
24. List{
25.      ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('幽蓝旗舰店')})){
27.      }
28. }

复制代码

订单商品部分虽然看起来较为复杂，反而不是很难，只要仔细分析布局和对齐方式就能轻松实现，具体代码如下：

1. ListItem{
2.     Column(10){
3.         Row(8){
4.             Image(@r(app.media.chaofu))
5.             .width(90)
6.             .height(90)
7.             
8.             Column(11){
9.                 Row{
10.                     Text('牛津纺布通勤男士衬衫')
11.                     .fontSize(16)
12.                     .fontColor(Color.BLACK)
13.                     Text('¥27.9')
14.                     .fontSize(16)
15.                     .fontColor(Color.BLACK)
16.                 }
17.                 .justifyContent(FlexAlign.SpaceBetween)
18.                 .width(100.percent)
19.                  Text('天蓝色，XL（180）')
20.                 .fontSize(14)
21.                 .fontColor(Color.GRAY)
22.                 .padding(4)
23.                 .backgroundColor(Color(241, 241, 241, alpha: 1.0))
24.                 .borderRadius(4)
25.             }
26.             .height(90)
27.             .layoutWeight(1)
28.             .alignItems(HorizontalAlign.Start)
29.             .justifyContent(FlexAlign.Start)
30.             .padding(top:10)
31.         }
32.          Row(10){
33.             Text('实付款：')
34.             .fontSize(13)
35.             .fontColor(Color(74, 74, 74, alpha: 1.0))
36.             Text('¥27.9')
37.             .fontSize(16)
38.             .fontColor(Color.BLACK)
39.              .fontWeight(FontWeight.Bold)
40.          }
41.         .width(100.percent)
42.         .justifyContent(FlexAlign.End)
43.         Row(10){
44.             Text('延长收货')
45.             .padding(top:6,bottom:6,left:8,right:8)
46.             .backgroundColor(Color(240, 240, 240, alpha: 1.0))
47.             .fontSize(14)
48.             .fontColor(Color(74, 74, 74, alpha: 1.0))
49.             .borderRadius(6)
50.             Text('查看物流')
51.             .padding(top:6,bottom:6,left:8,right:8)
52.             .fontSize(14)
53.             .fontColor(Color(74, 74, 74, alpha: 1.0))
54.             .backgroundColor(Color(240, 240, 240, alpha: 1.0))
55.             .borderRadius(6)
56.             Text('确认收货')
57.             .padding(top:6,bottom:6,left:8,right:8)
58.             .fontSize(14)
59.             .fontColor(Color(74, 74, 74, alpha: 1.0))
60.             .backgroundColor(Color(240, 240, 240, alpha: 1.0))
61.             .borderRadius(6)
62.         }
63.         .width(100.percent)
64.         .justifyContent(FlexAlign.End)
65.     }
66.     .padding(left:12,right:12)
67. }

复制代码

以上就是今天的内容分享，感谢阅读。##HarmonyOS语言##仓颉##购物#

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