鸿蒙ArkTS小案例-购物车

最近用鸿蒙的ArkTS做了一个购物车的小案例，在这里分享一下，该购物车已实现如下功能：

1. 购物车商品数量支持1个或者多个

2. 勾选1个或者多个商品后，底部可以动态计算出购买总数量和总价格

3. 同时，可以对购买商品的数量进行增加和减少，也可以实时算出购买总数量和总价格

3. 支持全选，也可以实时算出购买总数量和总价格

最终成果页面如下所示：

页面源码如下：

import { cartData, CartItem, retSumPrice } from '../../model/Cart';
import { CartItemView } from '../../viewmodel/CartItemView';

/**
 * Author: 波波老师(weixin:javabobo0513)
 * Desc: 购物车页面
 */
@Entry
@Component
struct ShopCarPlus {
  @State sumCount: number = 0; //商品总数量
  @State sumPrice: number = 0; //商品总价格
  @State arrCartData: Array<CartItem> = cartData.getCartData(); //购物车商品数据

  build() {
    Column() {
      Text('购物车')
        .fontSize(25)
        .fontWeight(FontWeight.Bold)
        .height(50)
      List() {
        ListItem() {
          Column({ space: 10 }) {
            ForEach(this.arrCartData, (cart: CartItem) => {
              CartItemView({
                cartItem: cart
              });
            })
          }
          .width('96%')
          .justifyContent(FlexAlign.Start)
        }
      }
      .alignListItem(ListItemAlign.Center) //设置子元素居中显示
      .height('85%') //设置List高度

      // 占位符，用于在布局中创建空间
      Blank()

      // 结算行的布局
      Flex({
        direction: FlexDirection.Row,
        wrap: FlexWrap.NoWrap,
        justifyContent: FlexAlign.Center,
        alignItems: ItemAlign.Center
      }) {
        // 全选复选框和文本
        Row({ space: 5 }) {
          CheckboxGroup({ group: 'cartGroup' })
            .width(16)
            //onChange：CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调
            .onChange(result => {
              this.sumCount = result.name.length;
              console.log(JSON.stringify(result))
              //result.name：群组内，被选中的 Checkbox 的name名称
              this.sumPrice = retSumPrice(this.arrCartData, result.name)
            })
          Text('全选')
            .fontSize(16)
        }
        .width('22%')

        // 结算信息
        Row() {
          // 显示已选商品数量和总金额
          Text(`已选 ${this.sumCount} 件`)
            .fontColor(Color.Gray)
            .fontSize(14)
          Text('合计: ')
            .fontSize(14)
          Text(`¥ ${this.sumPrice.toFixed(2)}`)
            .fontColor('#e6f51905')
            .fontSize(20)
        }
        .layoutWeight(1)

        // 结算按钮
        Button('结算')
          .width(70)
          .height(40)
          .backgroundColor('#ffff4801')
      }
      .padding(5)
      .height(60)
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius({
        topLeft: 25,
        topRight: 25
      })

    }
    .backgroundColor($r('app.color.page_bg')) // 页面背景颜色
    .width('100%')
    .height('100%')
  }
}

源码中涉及到的商品图片可以自行替换，希望对大家有所帮助