Harmonyos Cangjie Development Language Practical Tutorial: Implementing Mall Application Detail Pages

Yesterday, a friend mentioned that since HarmonyOS already has the ArkTs development language, why does it still need the Cangjie development language? In fact, this is not difficult to understand. Android has Java and Kotlin, iOS has successively launched Objective-C and Swift, and it is not surprising that HarmonyOS has two development languages. Moreover, Cangjie is a more flexible language than ArkTs. Although not many developers are familiar with it at present, Cangjie is bound to become a very important development language in the future.

Yesterday, we shared the implementation process of the home page of the mall application. Today, we will continue to introduce the development of the page and create a product detail page:

The detail page looks a bit simpler than the home page, but there are also many contents that have not appeared on the home page. The following is a detailed introduction for everyone.

Navigation bar

The contents of the navigation bar include the back button and the title. How can we achieve the layout of one element on the left and the other in the middle when there are only two elements? Here, I use a cascading layout to separate them without affecting each other. The specific code of the navigation bar is as follows:

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)   

Price and Introduction

This part is a simple layout of several text components. Just briefly analyze the horizontal and vertical layouts. Then, the text styles are a bit different. It should be noted here that setting the color attribute does not support the use of strings. Hexadecimal color values can be directly written without adding quotation marks

Column {

          Text('100')

          .fontSize(20)

          .margin(top:10)

          .fontColor(Color.RED)

          Row {

              Text('**制造商').fontSize(12).fontColor(0XC3A374)

              Text('生产周期3天').fontSize(12).fontColor(0X4a4a4a)

          }

          .width(100.percent).justifyContent(FlexAlign.SpaceBetween).margin(top:8)

          Text('纯棉牛津纺舒适基础长袖衬衫9色可选')

     .fontColor(Color.BLACK)

     .fontSize(18)

     .fontWeight(FontWeight.Bold)

     .margin(top:25)

Text('牛津纺衬衫时时尚界的不老男神，以英伦精英气质风靡数百年，单穿内搭皆宜')

      .fontColor(Color.GRAY)

     .fontSize(14)

     .margin(top:8,bottom:15)

 }.padding( right: 10,left: 10).width(100.percent).alignItems(HorizontalAlign.Start) .backgroundColor(Color.WHITE)  

Store information

The store information section is a horizontal layout of the store pictures and several text components. However, for the icon part here, I use text components, and the difference is not significant. The specific code is as follows:

Row(){

  Row(){

                Text('商城')

                .fontSize(22)

                .fontWeight(FontWeight.Bold)

                .fontColor(Color.WHITE)

  }

            .alignItems(VerticalAlign.Center)

            .justifyContent(FlexAlign.Center)

  .width(76)

  .height(76)

   .backgroundColor(Color.RED)

  .borderRadius(8)

  .margin(left:10)

  Column(){

    Text('哈哈旗舰店')

                .fontWeight(FontWeight.Bold)

      .fontColor(Color.BLACK)

      .fontSize(16)

    Row(){

      Text('商品质量 5.0')

        .fontColor(0X4a4a4a)

        .fontSize(15)

      Text('服务态度 5.0')

        .fontColor(0X4a4a4a)

        .fontSize(15)

        .margin(left:40)

    }

    .margin(top:15)

  }

  .margin(left:10)

  .alignItems(HorizontalAlign.Start)

  .justifyContent(FlexAlign.Center)

}

.width(100.percent)

.justifyContent(FlexAlign.Start)

.alignItems(VerticalAlign.Center) 

The above is the main process of Cangjie developing the language to implement the product detail page.