一、监听窗口大小变化

通过注册 windowSizeChange 事件监听窗口尺寸变化，获取实时窗口尺寸（单位：px）：

// 在UIAbility的onWindowStageCreate中设置监听
import { window } from '@kit.ArkUI';
import { UIAbility } from '@kit.AbilityKit';

export default class EntryAbility extends UIAbility {
  private windowObj: window.Window | undefined;

  onWindowStageCreate(windowStage: window.WindowStage) {
    // 获取主窗口
    windowStage.getMainWindow((err, data) => {
      if (err) {
        console.error('Failed to get main window. Cause: ' + JSON.stringify(err));
        return;
      }
      this.windowObj = data;
      
      // 注册窗口尺寸变化监听
      this.windowObj.on('windowSizeChange', (size: window.Size) => {
        console.info('Window size changed: ' + JSON.stringify(size));
        // 这里可触发UI更新逻辑
        this.updateUIByWindowSize(size);
      });
    });
  }

  // 窗口销毁时取消监听
  onWindowStageDestroy() {
    if (this.windowObj) {
      this.windowObj.off('windowSizeChange');
    }
  }
}

二、判断全屏/分屏状态

通过 windowStatusChange 事件监听窗口模式变化，直接获取当前状态（全屏、分屏、最大化等）：

// 注册窗口状态监听
this.windowObj.on('windowStatusChange', (status: window.WindowStatusType) => {
  console.info('Window status changed: ' + JSON.stringify(status));
  
  // 判断全屏/分屏（需根据API版本适配）
  if (status === window.WindowStatusType.FULL_SCREEN) {
    console.info('当前为全屏模式');
    this.handleFullScreenUI();
  } else if (status === window.WindowStatusType.SPLIT_SCREEN) {
    console.info('当前为分屏模式');
    this.handleSplitScreenUI();
  } else if (status === window.WindowStatusType.MAXIMIZE) {
    // API version 14+：最大化模式（2合1设备）
    console.info('当前为最大化模式（非全屏）');
    this.handleMaximizeUI();
  }
});

三、根据屏幕差异展示不同UI

方案1：基于断点（Breakpoint）的响应式布局

根据窗口宽度（转换为vp单位）划分断点，动态调整UI：

import { display } from '@kit.ArkUI';

// 定义断点（单位：vp）
private updateBreakpoint(windowWidthPx: number) {
  const density = display.getDefaultDisplaySync().densityPixels;
  const windowWidthVp = windowWidthPx / density; // 转换为vp
  
  let breakpoint: string;
  if (windowWidthVp < 320) {
    breakpoint = 'xs'; // 智能穿戴等小屏设备
  } else if (windowWidthVp < 600) {
    breakpoint = 'sm'; // 手机等中等屏幕
  } else if (windowWidthVp < 840) {
    breakpoint = 'md'; // 平板等大屏
  } else {
    breakpoint = 'lg'; // 大屏设备
  }
  
  // 存储断点信息供UI使用（例如通过AppStorage）
  AppStorage.setOrCreate('currentBreakpoint', breakpoint);
}

// 在windowSizeChange回调中调用
private updateUIByWindowSize(size: window.Size) {
  this.updateBreakpoint(size.width);
  // 同时可结合窗口状态综合判断
  this.windowObj.getWindowStatus().then((status) => {
    this.applyUILayout(status, size);
  });
}

方案2：直接结合窗口状态和尺寸

private applyUILayout(status: window.WindowStatusType, size: window.Size) {
  if (status === window.WindowStatusType.FULL_SCREEN) {
    // 全屏模式下使用紧凑布局
    this.loadLayout('fullscreen_layout');
  } else if (status === window.WindowStatusType.SPLIT_SCREEN) {
    // 分屏模式下使用双栏布局
    this.loadLayout('split_screen_layout');
  } else {
    // 根据宽度动态选择布局
    if (size.width < 600) { // 窄屏布局
      this.loadLayout('compact_layout');
    } else { // 宽屏布局
      this.loadLayout('expanded_layout');
    }
  }
}

四、完整示例代码（UIAbility中）

import { UIAbility } from '@kit.AbilityKit';
import { window, display } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

export default class EntryAbility extends UIAbility {
  private windowObj: window.Window | undefined;

  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.getMainWindow((err: BusinessError, data) => {
      if (err) {
        console.error('Failed to get main window. Cause: ' + JSON.stringify(err));
        return;
      }
      this.windowObj = data;

      // 1. 监听窗口尺寸变化
      this.windowObj.on('windowSizeChange', (size: window.Size) => {
        this.updateBreakpoint(size.width);
      });

      // 2. 监听窗口状态变化
      this.windowObj.on('windowStatusChange', (status: window.WindowStatusType) => {
        this.handleWindowStatusChange(status);
      });

      // 初始获取一次状态
      this.windowObj.getWindowStatus().then((status) => {
        this.handleWindowStatusChange(status);
      });
    });
  }

  private updateBreakpoint(windowWidthPx: number) {
    // ... 断点逻辑同上文
  }

  private handleWindowStatusChange(status: window.WindowStatusType) {
    // ... 状态处理逻辑同上文
  }

  onWindowStageDestroy() {
    if (this.windowObj) {
      this.windowObj.off('windowSizeChange');
      this.windowObj.off('windowStatusChange');
    }
  }
}