鸿蒙小项目购物商场

本学期学习了鸿蒙开发课程，想通过一个小项目检验一下自己所学，下面把该项目总结一下，希望对学习鸿蒙开发的小伙伴提供一些参考。

此项目主要是通过鸿蒙实现购物商场的功能，以下是部分运行截图。

以下是对代码的解析

1. BreakPointType<T> 类
这个类是用来为不同的断点（sm、md、lg）配置不同的值。它的构造函数接收一个 BreakPointTypeOption<T> 对象，这个对象包含三个字段：sm、md 和 lg，分别表示不同的断点值。

构造函数：BreakPointType<T> 类的构造函数接收一个 BreakPointTypeOption<T> 对象，并将其保存在 options 字段中。
getValue 方法：此方法根据当前的断点（currentBreakPoint）返回对应的值。如果 currentBreakPoint 为 'sm'，则返回 options.sm 的值，依此类推。如果断点是 md 或 lg，则分别返回 options.md 或 options.lg。
2. BreakpointSystem 类
该类用于管理断点检测系统，动态检测当前的屏幕断点（如 sm、md、lg），并将其存储在本地。

currentBreakpoint 字段：用于保存当前的断点。
smListener、mdListener、lgListener 字段：这三个字段保存了对应断点的监听器，监听器用于响应屏幕尺寸的变化。
updateCurrentBreakpoint 方法：当屏幕尺寸发生变化时，调用此方法来更新当前的断点，并将更新后的值存储在 AppStorage 中。
isBreakpointSM、isBreakpointMD、isBreakpointLG 方法：这三个方法分别用于判断当前屏幕是否匹配某个断点（sm、md、lg）。如果匹配，就会调用 updateCurrentBreakpoint 更新当前断点。
register 方法：这个方法注册所有断点的监听器。它使用 mediaquery.matchMediaSync 创建断点的媒体查询监听器，并为每个断点绑定相应的事件监听（即当断点发生变化时，触发 isBreakpointSM、isBreakpointMD 或 isBreakpointLG 方法）。
unregister 方法：此方法解绑事件监听器，防止内存泄漏。它会移除之前通过 on 方法注册的事件处理程序。
总结
BreakPointType<T> 类用于根据不同的屏幕断点（sm、md、lg）提供不同的值，并根据当前的断点返回相应的值。
BreakpointSystem 类则用于检测当前屏幕的尺寸，并保存对应的断点信息。它通过媒体查询的监听器动态检测屏幕尺寸的变化，并将当前断点存储在本地。

这段代码定义了一个 CommodityList 组件，它用来展示一个商品列表，并提供商品项的展示布局和点击事件处理。下面是对每个部分的详细解释：

1. 属性与组件结构
ts
复制代码
@Component
export struct CommodityList {
  @Link commodityList: Commodity[];  // 绑定的商品数据列表
  @Prop column: number = 0;  // 控制商品列表的列数，默认为 0
  private onClickItem? = (Commodity: Commodity) => {};  // 可选的点击事件处理函数
@Link commodityList: Commodity[];：这是一个数据绑定属性，表示传递给组件的商品列表。商品数据是一个 Commodity 数组。
@Prop column: number = 0;：这表示商品列表的列数。通过这个属性，父组件可以传递列数，默认为 0。
private onClickItem? = (Commodity: Commodity) => {};：一个可选的点击事件处理函数，用于处理用户点击商品项时的行为。
2. 商品项（CommodityItem）的构建
ts
复制代码
@Builder
CommodityItem(info: Commodity) {
  Column() {
    Image($rawfile(info.images[0]))
      .width($r('app.float.commodity_item_image_size'))
      .height($r('app.float.commodity_item_image_size'))
      .objectFit(ImageFit.Contain)
      .margin({
        top: $r('app.float.vp_sixteen'),
        bottom: $r('app.float.vp_eight')
      })
    Column() {
      Text($r('app.string.commodity_piece_description', info.title, info.description))
        .fontColor(Color.Black)
        .maxLines(StyleConstants.TWO_TEXT_LINE)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .fontSize($r('app.float.small_font_size'))
        .fontWeight(StyleConstants.FONT_WEIGHT_FOUR)
        .lineHeight($r('app.float.commodity_desc_height'))
      Text($r('app.string.commodity_piece', info.price))
        .fontColor($r('app.color.focus_color'))
        .fontSize($r('app.float.middle_font_size'))
        .margin({
          top: $r('app.float.vp_four'),
          bottom: $r('app.float.vp_eight')
        })
      Text(`${info.promotion}`)
        .fontSize($r('app.float.micro_font_size'))
        .fontColor(Color.White)
        .backgroundColor($r('app.color.focus_color'))
        .borderRadius($r('app.float.vp_four'))
        .height($r('app.float.vp_sixteen'))
        .padding({
          right: $r('app.float.vp_eight'),
          left: $r('app.float.vp_eight')
        })
    }
    .width(StyleConstants.FULL_WIDTH)
    .alignItems(HorizontalAlign.Start)
  }
  .padding($r('app.float.vp_twelve'))
  .height($r('app.float.commodity_item_height'))
  .width(StyleConstants.FULL_WIDTH)
  .backgroundColor(Color.White)
  .borderRadius($r('app.float.v