鸿蒙仓颉语言开发实战教程：购物车页面

大家上午好，仓颉语言商城应用的开发进程已经过半，不知道大家通过这一系列的教程对仓颉开发是否有了进一步的了解。今天要分享的购物车页面：

看到这个页面，我们首先要对它简单的分析一下。这个页面一共分为三部分，分别是导航栏、购物车列表和底部的结算栏。也能它们是column布局，那么怎么样让这三部分刚好撑满整个页面，有一个简单的办法：给导航栏和结算栏一个固定的高度，然后给List组件设置layoutWeight(1)属性即可。写一个简单的页面结构:

复制代码

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)

购物车列表

购物车列表毫无疑问使用List组件，今天的List组件比之前多了一些内容，就是店铺名字这部分的内容，我们使用List中的header来实现。

我首先写下header部分的内容，并自定义一个组件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)
}

在List中使用这个组件，并传入参数，就是店铺的名字：

复制代码

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

然后就是列表内容部分，循环列表内容我们只看其中一个就行了。

同样先把它简单的分析一下，大家可以把它分为两部分或者三部分，拆分开来就会比较简单了。

要注意的是这部分内容需要横向占满整个屏幕，我们同样可以使用layoutWeight来实现。

下面为大家贴上列表内容加上循环遍历的实现代码。仓颉Foreach写法比较不同，需要慢慢习惯：

复制代码

@State
 var carList:ObservedArrayList<CarItem> = ObservedArrayList<CarItem>(
    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)
        }
    })

结算栏

相比购物车列表，结算栏的内容就比较简单了，使用几个Row容器就能实现：

复制代码

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

以上就是购物车页面开发的内容分享，感谢阅读。#HarmonyOS语言##仓颉##购物#