Harmonyos Cangjie Development Language Practical Tutorial: Realizing the Home Page of the Mall Application

After several days of beginner tutorials, we have finally moved on to the practical stage of developing the Cangjie language. The content we are sharing today is about realizing the home page of the mall application. The effect diagram is as follows:

The content of the homepage includes the navigation bar, carousel, product classification and product list. We will introduce them one by one below.
Now let me share with you a basic knowledge about layout. All layout methods can be roughly divided into three types: horizontal layout, vertical layout and stacked layout. Other layout methods are all derived from these three, such as flexible layout, grid layout, list layout, etc.
So we can also make a simple analysis of today's page first. It is initially a vertical layout from top to bottom, with a horizontal layout nested in the middle, which can also be called a grid layout. A closer analysis reveals that it is composed of a navigation bar and a list component, and within the list component, there are different page structures.
If a similar analysis is conducted before each project development, the development process will become simpler. After completing the analysis, we can start writing the code.

Navigation bar

There is no navigation bar component in the Cangjie language. We need to develop it ourselves. The navigation bar here is also relatively simple, with only one search box. We have already explained the common components in Cangjie in previous articles. So here, the Search component is directly added under the Row container:

Row {
  Search(placeholder: "搜索",  controller: this.searchController)
  .height(38)
}.width(100.percent).height(60).padding(right: 12, left: 12) 

Carousel image

Cangjie has a carousel component and its usage is relatively simple:

Swiper{
  Image(@r(app.media.banner1)).width(100.percent).height(100.percent)
  Image(@r(app.media.banner2)).width(100.percent).height(100.percent)
  Image(@r(app.media.banner3)).width(100.percent).height(100.percent)
}.width(100.percent).height(160).duration(1500).autoPlay(true) 

Commodity classification

Here we will encounter Cangjie's first complex container, Grid, which functions the same as Grid in ArkTs：

Grid {
          ForEach(
              goodsTypeList,
              itemGeneratorFunc: {
                  item: TypeItem, index: Int64 => GridItem {
                      Column(){
                          Image(item.getImage()).width(40).height(40).margin(bottom: 4)
                          Text(item.getTitle()).fontSize(13).textAlign(TextAlign.Center).fontWeight(FontWeight.W400).margin(top:5)
                      }
                  }
              }
          )
      }.columnsTemplate('1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr')
      .width(100.percent).height(150).backgroundColor(0xFFFFFF)  

Product list

The product list is almost the same as the classification, except that it has been changed from 4 columns to 2 columns:

Grid {
         ForEach(
             goodsList,
             itemGeneratorFunc: {
                 item: GoodsItem, index: Int64 => GridItem {
                     Column(){
                         Image(item.getImage()).width(100.percent).height(200).margin(bottom: 4)
                         Text(item.getTitle()).fontSize(14).textAlign(TextAlign.Start).fontWeight(FontWeight.W400)
                         Text(item.getPrice()).fontSize(12).textAlign(TextAlign.Center).fontWeight(FontWeight.W400).fontColor(Color.RED)
                     }
                     .alignItems(HorizontalAlign.Start)
                 }
             }
         )
     }.columnsTemplate('1fr 1fr').columnsGap(10).rowsGap(10)
     .width(100.percent).backgroundColor(0xFFFFFF).padding( right: 10, left: 10)  

Finally, it should be noted that, except for the navigation bar, other components need to be scrollable, so they should be placed in the List component. Pay attention to the property Settings of the List. Here, layoutWeight is used to automatically allocate space:

List() {
    //banner
    ListItem {}    
    //分类
    ListItem {}
    //商品
    ListItem {}
}.layoutWeight(1)