Harmonyos Next Cangjie Language Development Practical Tutorial: Order List

Good morning, everyone. Recently, many friends have been giving feedback that Cangjie language and ArkTs are quite similar, so be careful not to confuse them. Today, I’m going to share the order list page of the mall application developed with Cangjie language.

First, let’s analyze this page. It is divided into three major parts, namely the navigation bar, order types and order list section.
The navigation bar consists of a back button and a search box. Here, it should be noted that when components horizontally fill the screen, the layoutWeight attribute should be used. The implementation code of the navigation bar part is as follows:

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)  

The order type should be a scrolling horizontal bar. Although it doesn’t fill the entire screen at present, in order to adapt to more screen sizes and types, we still need to use Scroll. The content inside is added using a foreach loop. You need to gradually get used to the writing method of Foreach in Cangjie. Additionally, here a variable named orderIndex is set and the type of the currently selected order is specified. The specific implementation code for this part is as follows:

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) 

Finally, there is the order List section. It is obviously a List component and still uses layoutWeight to fill the remaining screen. Then, the store name and shipping status sections are implemented using the header of the List.

@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)('幽蓝旗舰店')})){

     }
} 

Although the item section of the order seems rather complex, it is not very difficult. As long as the layout and alignment are carefully analyzed, it can be easily achieved. The specific code is as follows:

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)
} 

The above is today’s content sharing. Thank you for reading.