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

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

首先来分析一下这个页面，它分为三大部分，分别是导航栏、订单类型和订单列表部分。

导航栏由返回按钮和搜索框组成，这里要注意组件横向占满屏幕时要使用layoutWeight属性，导航栏部分的实现代码如下：

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

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

Scroll{     Row(25){     ForEach(this.orderTypeList, itemGeneratorFunc: {item:String,index:Int64 =>                 if(this.orderIndex == index){                      Text(item)                      .fontColor(Color(215, 68, 62, alpha: 1.0))                      .fontSize(17)                      .fontWeight(FontWeight.Bold)                 }else {                  Text(item)                  .fontColor(Color.GRAY)                  .fontSize(16)                 .onClick({evet => this.orderIndex = index})                 }             }) } .width(100.percent) .height(40) } .height(40) .padding( right: 12, left: 12) .scrollable(ScrollDirection.Horizontal) .scrollBar(BarState.Off) .scrollBarColor(Color.GRAY) .scrollBarWidth(50.px)

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

@Builder func itemHead(text:String) {     Row{         Row{         Text(text)         .fontSize(15)         .fontWeight(FontWeight.Bold)         .backgroundColor(Color.WHITE)           Image(@r(app.media.righticon))             .height(18)             .width(18)             .objectFit(ImageFit.Contain)         }         Text('卖家已发货')         .fontColor(Color.RED)         .fontSize(14)     }     .width(100.percent)     .height(35)     .justifyContent(FlexAlign.SpaceBetween)     .alignItems(VerticalAlign.Center)     .padding(left:12,right:12) }  List{      ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('幽蓝旗舰店')})){       } }

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

ListItem{     Column(10){         Row(8){             Image(@r(app.media.chaofu))             .width(90)             .height(90)                          Column(11){                 Row{                     Text('牛津纺布通勤男士衬衫')                     .fontSize(16)                     .fontColor(Color.BLACK)                     Text('¥27.9')                     .fontSize(16)                     .fontColor(Color.BLACK)                 }                 .justifyContent(FlexAlign.SpaceBetween)                 .width(100.percent)                  Text('天蓝色，XL（180）')                 .fontSize(14)                 .fontColor(Color.GRAY)                 .padding(4)                 .backgroundColor(Color(241, 241, 241, alpha: 1.0))                 .borderRadius(4)             }             .height(90)             .layoutWeight(1)             .alignItems(HorizontalAlign.Start)             .justifyContent(FlexAlign.Start)             .padding(top:10)         }          Row(10){             Text('实付款：')             .fontSize(13)             .fontColor(Color(74, 74, 74, alpha: 1.0))             Text('¥27.9')             .fontSize(16)             .fontColor(Color.BLACK)              .fontWeight(FontWeight.Bold)          }         .width(100.percent)         .justifyContent(FlexAlign.End)         Row(10){             Text('延长收货')             .padding(top:6,bottom:6,left:8,right:8)             .backgroundColor(Color(240, 240, 240, alpha: 1.0))             .fontSize(14)             .fontColor(Color(74, 74, 74, alpha: 1.0))             .borderRadius(6)             Text('查看物流')             .padding(top:6,bottom:6,left:8,right:8)             .fontSize(14)             .fontColor(Color(74, 74, 74, alpha: 1.0))             .backgroundColor(Color(240, 240, 240, alpha: 1.0))             .borderRadius(6)             Text('确认收货')             .padding(top:6,bottom:6,left:8,right:8)             .fontSize(14)             .fontColor(Color(74, 74, 74, alpha: 1.0))             .backgroundColor(Color(240, 240, 240, alpha: 1.0))             .borderRadius(6)         }         .width(100.percent)         .justifyContent(FlexAlign.End)     }     .padding(left:12,right:12) }

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