Harmonyos Next Cangjie Language Development Practical Tutorial: Order Details

Youlan Jun heard that the 5.1 version of HarmonyOS is about to be released and the 6.0 version is also coming soon. He expressed great anticipation.

Today, we continue to share a practical tutorial on developing a mall application using the Cangjie language. What we are going to share today is the order details page:

Today should be the first time we have encountered a page divided into three parts: top, middle and bottom, and the content in the middle can be scrolled. How should such a layout be set up? Actually, it's the same as before. We know the heights of two of them. For the third container, just use the layoutWeight property. Here, the List component is still used to make layoutWeight. Here are the contents of the upper and lower parts and the overall layout code of the List container:

Column(){
    Stack {
         Text('订单详情')
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.BLACK)
        Row{
             Image(@r(app.media.back))
        .width(27)
        .height(27)
         .onClick({evet => Router.back()})
        }.width(100.percent).justifyContent(FlexAlign.Start).padding(left:5)
    }
    .width(100.percent)
    .height(60)
    .backgroundColor(Color.WHITE)
     List(space:8){
    }
       .backgroundColor(Color(240, 240, 240, alpha: 1.0))
      .layoutWeight(1)
      Row{
          Row(){
      Text('实付金额：')
        .fontColor(Color.BLACK)
        .fontSize(15)
      Text('¥100' )
        .fontColor(Color.RED)
        .fontSize(15)
    }
    .margin(left:10)
          Text('立即支付')
      .fontColor(Color.WHITE)
      .backgroundColor(Color.RED)
      .width(80)
      .height(40)
      .textAlign(TextAlign.Center)
      .borderRadius(20)
      .margin(right:10)
      }
      .backgroundColor(Color.WHITE)
  .width(100.percent)
  .height(50)
  .justifyContent(FlexAlign.SpaceBetween)
}.width(100.percent).height(100.percent)  

The remaining content is the content in the List container, that is, the main content part. It can be seen that they are divided into three groups. When each group is broken down, it is relatively simple and all follow the basic layout method.

For instance, in the middle section of product details, it can be divided into upper and lower parts, and the upper content part can be further divided into left and right parts. This is the basic logic of analyzing the layout.

Here's a point to mention. If in Cangjie you want to set the width of a certain edge line, for example, the width of the upper edge line, write it like this:

.borderWidth(EdgeWidths( top: 1.vp))

The specific code of the List content part is also attached below:

ListItem{
      Column{
          Row{
    Text('默认')
      .fontColor(Color.WHITE)
      .fontSize(15)
      .backgroundColor(Color.RED)
      .width(35)
      .height(20)
      .textAlign(TextAlign.Center)
    Text('北京北京市东城')
      .fontColor(Color.BLACK)
      .fontSize(15)
      .margin(left:5)
  }
          Text('石景山游乐园68号')
    .fontColor(Color.BLACK)
    .fontSize(18)
    .fontWeight(FontWeight.Bold)
    .margin(top:10)
  Text('王富贵 13084532514')
    .fontColor(Color.BLACK)
    .fontSize(16)
    .margin(top:10)
      }
      .width(100.percent)
      .alignItems(HorizontalAlign.Start)
  }
  .padding(left:10,right:10)
  .width(100.percent)
  .height(100)
  .backgroundColor(Color.WHITE)
  ListItem{
      Column{
          Row{
          Row{
              Image(@r(app.media.good1))
              .width(60)
              .height(60)
              .margin(left:1)
              Column{
                  Text('纯棉牛津纺舒适基础长袖衬衫')
          .fontColor(Color.BLACK)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .maxLines(1)
        Text('天蓝色 L')
          .fontColor(Color.GRAY)
          .fontSize(14)
          .maxLines(1)
          .margin(top:5)
                  Row(){
          Text('单价: ¥100' )
            .fontColor(Color.BLACK)
            .fontSize(15)
          Text('数量: 1' )
            .fontColor(Color.BLACK)
            .fontSize(15)
            .margin(left:20)
        }
        .margin(top:5)
              }
               .alignItems(HorizontalAlign.Start)
               .width(60.percent)
               .margin(left:10)
          }
          Text('¥100')
      .fontColor(Color.BLACK)
      .fontSize(16)
      .margin(right:10)
      }
      .padding(top:10,bottom:10)
  .width(100.percent)
  .justifyContent(FlexAlign.SpaceBetween)
  .alignItems(VerticalAlign.Top)
  .borderColor(Color(236, 236, 236, alpha: 1.0))
  .borderStyle(BorderStyle.Solid)
          Row{
      Text('共计金额:')
    .fontColor(Color.BLACK)
    .fontSize(15)
      Text('¥100')
    .fontColor(Color.RED)
    .fontSize(15)
}

          .borderWidth(EdgeWidths( top: 1.vp))
          .borderColor(Color(236, 236, 236, alpha: 1.0))
.alignItems(VerticalAlign.Center)
.padding(left:10,right:10)
.width(100.percent)
.height(40)
.justifyContent(FlexAlign.SpaceBetween)
      }
  }
  .backgroundColor(Color.WHITE)
   .width(100.percent)
  .padding(top:10,bottom:10)
  ListItem{
      Column{
          Row{
              Row(){
    Image('')
      .width(30)
      .height(30)
      .borderRadius(15)
                  .backgroundColor(Color(21,120,255))
    Text('支付宝支付')
      .fontSize(15)
      .fontColor(Color.BLACK)
      .margin(left:8)
  }
  Image( @r(app.media.choose1))
    .width(15)
    .height(15)
          }
          .padding(left:10,right:10)
          .width(100.percent)
          .justifyContent(FlexAlign.SpaceBetween)
          .height(45)
          Row{
              Row(){
    Image('')
      .width(30)
      .height(30)
      .borderRadius(15)
                  .backgroundColor(Color(84, 169, 70, alpha: 1.0))
    Text('微信支付')
      .fontSize(15)
      .fontColor(Color.BLACK)
      .margin(left:8)
  }
  Image( @r(app.media.choose0))
    .width(15)
    .height(15)
          }
          .padding(left:10,right:10)
          .width(100.percent)
          .justifyContent(FlexAlign.SpaceBetween)
          .height(45)
      }
  }
   .backgroundColor(Color.WHITE) 

Thank you for your reading today.