01-万少带你精读鸿蒙 codelabs 一多界面适配和三层架构

export class BreakpointSystem {
  private currentBreakpoint: string = "";
  private smListener?: mediaquery.MediaQueryListener;
  private mdListener?: mediaquery.MediaQueryListener;
  private lgListener?: mediaquery.MediaQueryListener;

  private updateCurrentBreakpoint(breakpoint: string) {
    if (this.currentBreakpoint !== breakpoint) {
      this.currentBreakpoint = breakpoint;
      AppStorage.set<string>(
        BreakpointConstants.CURRENT_BREAKPOINT,
        this.currentBreakpoint
      );
    }
  }

  public register() {
    this.smListener = mediaquery.matchMediaSync(BreakpointConstants.RANGE_SM);
    this.smListener.on("change", this.isBreakpointSM);
    this.mdListener = mediaquery.matchMediaSync(BreakpointConstants.RANGE_MD);
    this.mdListener.on("change", this.isBreakpointMD);
    this.lgListener = mediaquery.matchMediaSync(BreakpointConstants.RANGE_LG);
    this.lgListener.on("change", this.isBreakpointLG);
  }

  public unregister() {
    this.smListener?.off("change", this.isBreakpointSM);
    this.mdListener?.off("change", this.isBreakpointMD);
    this.lgListener?.off("change", this.isBreakpointLG);
  }
}

export class BreakPointType<T> {
  options: BreakPointTypeOption<T>;

  constructor(option: BreakPointTypeOption<T>) {
    this.options = option;
  }

  getValue(currentBreakPoint: string): T {
    if (this.options.sm !== undefined && currentBreakPoint === "sm") {
      return this.options.sm as T;
    }
    if (this.options.md && currentBreakPoint === "md") {
      return this.options.md as T;
    } else {
      return this.options.lg as T;
    }
  }
}

export class BreakpointConstants {
  /**
   * 表示小型设备的断点
   */
  static readonly BREAKPOINT_SM: string = "sm";

  /**
   * 表示中型设备的断点
   */
  static readonly BREAKPOINT_MD: string = "md";

  /**
   * 表示大型设备的断点
   */
  static readonly BREAKPOINT_LG: string = "lg";

  /**
   * 当前断点，用于查询设备类型
   */
  static readonly CURRENT_BREAKPOINT: string = "currentBreakpoint";

  /**
   * 小型设备宽度范围
   */
  static readonly RANGE_SM: string = "(320vp<=width<520vp)";

  /**
   * 中型设备宽度范围
   */
  static readonly RANGE_MD: string = "(520vp<=width<840vp)";

  /**
   * 大型设备宽度范围
   */
  static readonly RANGE_LG: string = "(840vp<=width)";
}

// SplashPage.ets
@Entry
@Component
struct SplashPage {
  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';
  private breakpointSystem = new BreakpointSystem();

  aboutToAppear() {
    this.breakpointSystem.register();
    // ...其他代码
  }

  aboutToDisappear() {
    this.breakpointSystem.unregister();
    // ...其他代码
  }
}

@Component
struct MyComponent {
  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'md';

  // ...组件代码
}

Image($r("app.media.ic_eshop")).width(
  new BreakPointType({
    sm: $r("app.float.splash_image_size"),
    md: $r("app.float.splash_image_size"),
    lg: $r("app.float.splash_image_size_lg"),
  }).getValue(this.currentBreakpoint)
);

MultiShopping/
├── common/                 # 公共能力层
│   ├── src/main/ets/
│   │   ├── components/     # 公共UI组件
│   │   ├── constants/      # 公共常量定义
│   │   ├── utils/          # 公共工具类
│   │   └── viewmodel/      # 公共数据模型
│   └── ...
├── features/               # 基础特性层
│   ├── home/               # 首页功能模块
│   ├── personal/           # 个人中心功能模块
│   ├── shopcart/           # 购物车功能模块
│   ├── commoditydetail/    # 商品详情功能模块
│   └── ...
└── product/                # 产品定制层
    └── phone/              # 手机产品
        ├── src/main/ets/
        │   ├── pages/      # 页面定义
        │   ├── entryability/ # 应用入口
        │   └── ...
        └── ...