鸿蒙开发进阶：一次开发多端部署之Breakpoint原理探秘

使用

引入Breakpoint

import { BreakpointSystem } from '../common/BreakpointSystem';

实例化Breakpoint声明静态属性breakpointSystem，使用StorageProp获取全局设定的currentBreakpoint，值一般是‘sm’、‘md’、‘lg’，该属性为响应式可在DOM结构中使用

private breakpointSystem: BreakpointSystem = new BreakpointSystem();
@StorageProp('currentBreakpoint') curBp: string = Constants.BREAKPOINTS[1];

监听函数注册与解绑

aboutToAppear() {
  this.breakpointSystem.register();
}
aboutToDisappear() {
  this.breakpointSystem.unregister();
}

原理

声明断点arkts类型

import { mediaquery } from "@kit.ArkUI";
import Constants from './Constants';

interface Breakpoint {
  name: string,
  size: number,
  mediaQueryListener?: mediaquery.MediaQueryListener
}

Breakpoint