鸿蒙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语言##仓颉##购物#