Harmonyos Cangjie Language Development Practical Tutorial: Shopping Cart Page

Good morning, everyone. The development process of the Cangjie Language Mall application is already halfway through. I wonder if you have gained a further understanding of Cangjie development through this series of tutorials. The shopping cart page to be shared today: When we see this page, we first need to make a simple analysis of it. This page is divided into three parts in total, namely the navigation bar, the shopping cart list and the settlement bar at the bottom. If they are column layouts, then how to make these three parts just fill the entire page? There is a simple way: set a fixed height for the navigation bar and the settlement bar, and then set the layoutWeight(1) property for the List component. Write a simple page structure: Column{ Row{ //导航栏 } .width(100.percent) .height(60) List{ //购物车列表 } .width(100.percent) .layoutWeight(1) Row{ //结算栏 } .width(100.percent) .height(45) } .width(100.percent) .height(100.percent) Shopping cart list The shopping cart List undoubtedly uses the List component. Today's List component has some more content than before, which is the store name part. We implement it using the header in the list. First, I write down the content of the header part and customize a component, itemHead: @Builder func itemHead(text:String) { Row{ Text(text) .fontSize(15) .backgroundColor(Color.WHITE) .padding(10) Image(@r(app.media.righticon)) .height(18) .width(18) .objectFit(ImageFit.Contain) .margin(left:-5) } .width(100.percent) .height(35) .alignItems(VerticalAlign.Center) } Use this component in the List and pass in the parameter, which is the name of the store: List(space:12) { ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('幽蓝旗舰店')})){ }) } Then comes the list content part. For the looping list content, we only need to look at one of them. Let's first give it a simple analysis. You can divide it into two or three parts. If you break it down, it will be much simpler. It should be noted that this part of the content needs to fill the entire screen horizontally. We can also use layoutWeight to achieve this. Here is the implementation code for the list content and loop traversal for everyone. The writing of "Foreach" in Cangjie is quite different and requires gradual getting used to. @State var carList:ObservedArrayList = ObservedArrayList( CarItem('纯棉牛津纺舒适基础长袖衬衫',@r(app.media.good1), '100',1), CarItem('顺滑抗皱女士通勤高腰显瘦阔腿休闲裤',@r(app.media.good2), '100',1), CarItem('女士高腰牛仔裤',@r(app.media.good3), '100',1), CarItem('女士多彩牛仔裤',@r(app.media.good4), '100',1) ) ForEach(this.carList, itemGeneratorFunc:{ item:CarItem, index: Int64 => ListItem { Row(8){ Image(@r(app.media.unselect)) .width(17) .height(17) Image(item.getCover()) .width(90) .height(90) .borderRadius(6) Column { Column(5){ Text(item.getName()) .fontSize(16) .fontColor(Color.BLACK) Text('天蓝色，XL（180）') .fontSize(14) .fontColor(Color.GRAY) .padding(4) .backgroundColor(Color(241, 241, 241, alpha: 1.0)) .borderRadius(4) } .alignItems(HorizontalAlign.Start) Row { Row{ Text('¥') .fontColor(Color.RED) .fontSize(13) Text(item.getPrice()) .fontSize(18) .fontColor(Color.RED) .fontWeight(FontWeight.Bold) } .alignItems(VerticalAlign.Bottom) Row (6){ Text('-') .fontColor(Color(74, 74, 74, alpha: 1.0)) .fontSize(16) Text(item.getCount().toString()) .fontSize(14) .fontColor(Color.BLACK) .padding(4) .backgroundColor(Color(241, 241, 241, alpha: 1.0)) .textAlign(TextAlign.Center) .width(40) .height(28) .borderRadius(6) Text('+') .fontColor(Color(74, 74, 74, alpha: 1.0)) .fontSize(16) } .alignItems(VerticalAlign.Center) } .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.SpaceBetween) .width(100.percent) } .layoutWeight(1) .alignItems(HorizontalAlign.Start) .height(90) .justifyContent(FlexAlign.SpaceBetween) } .width(100.percent) .h

Jun 3, 2025 - 03:50

Harmonyos Cangjie Language Development Practical Tutorial: Shopping Cart Page

Good morning, everyone. The development process of the Cangjie Language Mall application is already halfway through. I wonder if you have gained a further understanding of Cangjie development through this series of tutorials. The shopping cart page to be shared today:

When we see this page, we first need to make a simple analysis of it. This page is divided into three parts in total, namely the navigation bar, the shopping cart list and the settlement bar at the bottom. If they are column layouts, then how to make these three parts just fill the entire page? There is a simple way: set a fixed height for the navigation bar and the settlement bar, and then set the layoutWeight(1) property for the List component. Write a simple page structure:

Column{
    Row{
        //导航栏
    }
    .width(100.percent)
    .height(60)
    List{
        //购物车列表
    }
    .width(100.percent)
    .layoutWeight(1)
    Row{
        //结算栏
    }
    .width(100.percent)
    .height(45)
}
.width(100.percent)
.height(100.percent)

Shopping cart list

The shopping cart List undoubtedly uses the List component. Today's List component has some more content than before, which is the store name part. We implement it using the header in the list.

First, I write down the content of the header part and customize a component, itemHead:


@Builder func itemHead(text:String) {
    Row{
        Text(text)
        .fontSize(15)
        .backgroundColor(Color.WHITE)
        .padding(10)
          Image(@r(app.media.righticon))
            .height(18)
            .width(18)
            .objectFit(ImageFit.Contain)
            .margin(left:-5)
    }
    .width(100.percent)
    .height(35)
    .alignItems(VerticalAlign.Center)
}

Use this component in the List and pass in the parameter, which is the name of the store:

List(space:12) {
  ListItemGroup(ListItemGroupParams(header:{=>bind(this.itemHead,this)('幽蓝旗舰店')})){

  })
}

Then comes the list content part. For the looping list content, we only need to look at one of them.

Let's first give it a simple analysis. You can divide it into two or three parts. If you break it down, it will be much simpler.

It should be noted that this part of the content needs to fill the entire screen horizontally. We can also use layoutWeight to achieve this.

Here is the implementation code for the list content and loop traversal for everyone. The writing of "Foreach" in Cangjie is quite different and requires gradual getting used to.

@State
 var carList:ObservedArrayList = ObservedArrayList(
    CarItem('纯棉牛津纺舒适基础长袖衬衫',@r(app.media.good1), '100',1),
    CarItem('顺滑抗皱女士通勤高腰显瘦阔腿休闲裤',@r(app.media.good2), '100',1),
    CarItem('女士高腰牛仔裤',@r(app.media.good3), '100',1),
    CarItem('女士多彩牛仔裤',@r(app.media.good4), '100',1)
)    



ForEach(this.carList,
    itemGeneratorFunc:{
        item:CarItem, index: Int64 => ListItem {
            Row(8){
                Image(@r(app.media.unselect))
                .width(17)
                .height(17)
        Image(item.getCover())
        .width(90)
        .height(90)
        .borderRadius(6)
        Column {
            Column(5){
                Text(item.getName())
                .fontSize(16)
                .fontColor(Color.BLACK)
                Text('天蓝色，XL（180）')
                .fontSize(14)
                .fontColor(Color.GRAY)
                .padding(4)
                .backgroundColor(Color(241, 241, 241, alpha: 1.0))
                .borderRadius(4)
            }
            .alignItems(HorizontalAlign.Start)
            Row {
                Row{
                    Text('¥')
                    .fontColor(Color.RED)
                    .fontSize(13)
                    Text(item.getPrice())
                    .fontSize(18)
                    .fontColor(Color.RED)
                    .fontWeight(FontWeight.Bold)
                }
                .alignItems(VerticalAlign.Bottom)
                Row (6){
                    Text('-')
                    .fontColor(Color(74, 74, 74, alpha: 1.0))
                    .fontSize(16)
                     Text(item.getCount().toString())
                     .fontSize(14)
                     .fontColor(Color.BLACK)
                     .padding(4)
                     .backgroundColor(Color(241, 241, 241, alpha: 1.0))
                    .textAlign(TextAlign.Center)
                    .width(40)
                    .height(28)
                    .borderRadius(6)
                    Text('+')
                    .fontColor(Color(74, 74, 74, alpha: 1.0))
                    .fontSize(16)
                }
                .alignItems(VerticalAlign.Center)
            }
            .alignItems(VerticalAlign.Center)
            .justifyContent(FlexAlign.SpaceBetween)
            .width(100.percent)
        }
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Start)
         .height(90)
         .justifyContent(FlexAlign.SpaceBetween)
     }
      .width(100.percent)
      .height(110)
        }
    })

Settlement column

Compared with the shopping cart list, the content of the checkout column is relatively simple and can be achieved by using a few Row containers:

Row(6){
        Row(){
        Text('合计')
        .fontSize(13)
        .fontColor(Color.BLACK)
        Text('¥')
            .fontColor(Color.RED)
            .fontSize(13)
            .margin(left:5)
                            Text('0')
                            .fontSize(18)
                            .fontColor(Color.RED)
                            .fontWeight(FontWeight.Bold)
    }
    .alignItems(VerticalAlign.Bottom)
    Text('结算')
    .fontColor(Color.WHITE)
    .backgroundColor(Color.RED)
    .width(100)
    .height(38)
    .borderRadius(6)
        .textAlign(TextAlign.Center)
    }

The above is the content sharing of the shopping cart page development. Thank you for reading. #HarmonyOS Language ## Cangjie ## Shopping #