HarmonyOS 鸿蒙Next栅格布局如何获取当前设备宽度类型

sm, md, lg表示对应的窗口断点； columns设置划分的栅格数量，gutter设置每个栅格之间的距离； span设置GridCol占据的栅格数量，offset设置GridCol偏移的栅格数（默认不偏移，左对齐）。

以上代码可以实现界面内容在手机和折叠机(折叠态)占据全部宽度，折叠机(展开态)占据3/4宽度，平板占据1/2宽度，通过设置偏移量来保证内容居中显示。

获取窗口断点 响应式布局是一种自适应的能力，可以令页面的显示效果随窗口尺寸动态变化，栅格布局就是一种基础的响应式布局。

如果需要根据不同的窗口尺寸，设置布局的细节变化（例如：组件位置、对齐方式等），就需要获取当前的屏幕断点，并监听断点的变化。

ArkTS框架提供了两种实现方法：

（1）获取窗口对象并监听窗口尺寸变化： 在Ability的onWindowStageCreate生命周期中注册监听

windowStage.getMainWindow().then((windowObj) => {
  this.windowObj = windowObj;
  // 获取窗口尺寸
  this.updateBreakpoint(windowObj.getWindowProperties().windowRect.width);
  // 监听窗口尺寸变化
  windowObj.on('windowSizeChange', (windowSize) =>{
    this.updateBreakpoint(windowSize.width);
  });
});
// 更新断点
public updateBreakpoint(windowWidth: number) {
  let curBp = AppStorage.get<string>('curBp');
  // 将px换算为vp
  let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels;
  let newBp: string = '';
  if (windowWidthVp < 320) {
    newBp = 'xs';
  } else if (windowWidthVp < 600) {
    newBp = 'sm';
  } else if (windowWidthVp < 840) {
    newBp = 'md';
  } else {
    newBp = 'lg';
  }
  if (curBp !== newBp) {
    curBp = newBp;
    LogUtils.i(TAG, 'updateBreakpoint to ' + newBp);
    AppStorage.setOrCreate('curBp', curBp);
  }
}

在onWindowStageDestroy生命周期中取消监听

（2）通过媒体查询监听应用窗口尺寸变化

aboutToAppear(): void {
  this.smListener = mediaQuery.matchMediaSync('(320vp<width<=520vp)');
  if (this.smListener.matches) {
  this.updateCurrentBreakpoint('sm');
}
this.smListener.on("change", this.isBreakpointSM);
}
isBreakpointSM = (mediaQueryResult) => {
  if (mediaQueryResult.matches) {
    this.updateCurrentBreakpoint('sm');
  }
}
private updateCurrentBreakpoint(breakpoint: string) {
  if (this.curBp!== breakpoint) {
    this.curBp = 'sm';
    AppStorage.SetOrCreate('curBp', this.curBp);
  }
}
aboutToDisappear (): void { // 取消监听
  this.smListener.off('change', this.isBreakpointSM);
}

以上两种方法都可以得到一个存储断点信息的全局变量，从而根据不同的断点为组件设置不同的属性值

弹窗组件使用单独的builder，一般独立于界面之外，因此也需要根据设备宽度进行适配。

根据UX设计规则，弹窗的位置与所占栅格数量定义为： 直板机：位于窗口底部（距底部12vp）

折叠机与平板：位于窗口中心

在ArkUI中较为常用的是自定义弹窗（CustomDialog），以弹窗创建的代码为例（其他类型弹窗同理）。 其中，

alignment属性控制弹窗的位置，DialogAlignment.Default为默认对齐方式，即距底部12vp；DialogAlignment.Center为居中对齐方式。

gridCount属性控制弹窗宽度所占栅格数量。

代码样例：

alignment: this.getDialogAlignment(this.curBp),

gridCount: this.getDialogGridCount(this.curBp, this.ratio),
public getDialogAlignment (curBp: string) {
  return curBp === 'sm' ? DialogAlignment.Default : DialogAlignment.Center;
}
public getDialogGridCount (curBp: string, ratio: number) {
  if (curBp && ratio) {
    if (curBp === 'sm') {
      return ratio > (9 / 16) ? 3 : 4;
    } else if (curBp === 'md') {
      return ratio > (3 / 4) ? 4 : 5;
    } else if (curBp === 'lg') {
      return ratio > (4 / 3) ? 5 : 6;
    }
  }
  return 4;
}