窗口模式

概述

应用窗口模式指应用主窗口启动时的显示方式。HarmonyOS目前支持全屏、分屏、自由悬浮多窗三种应用窗口模式。这种对多种应用窗口模式的支持能力，也称为操作系统的“多窗口能力”。

• 全屏：应用主窗口启动时铺满整个屏幕。
• 分屏：应用主窗口启动时占据屏幕的某个部分，当前支持二分屏。两个分屏窗口之间具有分界线，可通过拖拽分界线调整两个部分的窗口尺寸。

自由悬浮多窗分为自由多窗和悬浮窗。

• 自由多窗：自由窗口的大小和位置可自由调整。同一个屏幕上可同时显示多个自由窗口，这些自由窗口按照打开或者获取焦点的顺序在Z轴排布。当自由窗口被点击或触摸时，其Z轴高度提升，并获取焦点。
• 悬浮窗：悬浮窗是一种在设备屏幕上悬浮的非全屏应用窗口。一般用于在已有全屏任务运行的基础上，临时处理另一个任务，或短时间多任务并行使用。如浏览网页的同时回复消息。

实现窗口模式

窗口模式是由系统提供的能力，不需要开发者单独开发功能，所以开发者只需要考虑悬浮或者分屏之后应用界面的适配问题。

当应用需要配置是否支持悬浮窗/分屏能力时，可以通过在module.json5配置文件中abilities标签下添加supportWindowMode字段来实现。supportWindowMode属性主要标识当前UIAbility所支持的窗口模式，详细请参见应用声明支持智慧多窗。

supportWindowMode属性默认值为["fullscreen", "split", "floating"]，即全屏、分屏、悬浮窗全部支持。开发者可以通过配置supportWindowMode属性来定制支持的窗口模式。支持的字段及含义如下表所示。

获取窗口模式

开发者可以通过获取windowStatusType的值来判断设备目前的窗口模式。

public onStatusTypeChange: (statusType: window.WindowStatusType) => void = (statusType: window.WindowStatusType) => {
  this.mainWindowInfo.windowStatusType = statusType;
}
// ...
updateWindowInfo(): void {
  try {
    // First time get window status.
    this.mainWindowInfo.windowStatusType = this.mainWindow.getWindowStatus();
    this.mainWindow.on('windowStatusChange', this.onStatusTypeChange);
    // ...
  } catch (error) {
    let err = error as BusinessError;
    hilog.error(0x0000, `TestLog`, `Failed to update window info. Code: ${err.code}, message: ${err.message}`);
  }
}

不同设备支持哪些窗口模式

窗口模式与产品设计强相关，不同产品支持的窗口模式不同。

WindowType和WindowStatusType的使用区别

• WindowType表示窗口的类型枚举。

  HarmonyOS的窗口模块将窗口界面分为系统窗口、应用窗口两种基本类型。

  • 系统窗口：系统窗口指完成系统特定功能的窗口。如音量条、壁纸、通知栏、状态栏、导航栏等。
  • 应用窗口：应用窗口区别于系统窗口，指与应用显示相关的窗口。根据显示内容的不同，应用窗口又分为应用主窗口、应用子窗口两种类型。
    • 应用主窗口：应用主窗口用于显示应用界面，会在“任务管理界面”显示。
    • 应用子窗口：应用子窗口用于显示应用的弹窗、悬浮窗等辅助窗口，不会在“任务管理界面”显示。应用子窗口的生命周期跟随应用主窗口。

• WindowStatusType表示窗口模式枚举。

  应用窗口模式指应用主窗口启动时的显示方式。HarmonyOS目前支持全屏、分屏、自由窗口三种应用窗口模式。这种对多种应用窗口模式的支持能力，也称为操作系统的“多窗口能力”。

  • 全屏：应用主窗口启动时铺满整个屏幕。
  • 分屏：应用主窗口启动时占据屏幕的某个部分，当前支持二分屏。两个分屏窗口之间具有分界线，可通过拖拽分界线调整两个部分的窗口尺寸。
  • 自由悬浮多窗：分为自由多窗和悬浮窗。
    • 自由多窗：自由窗口的大小和位置可自由调整。同一个屏幕上可同时显示多个自由窗口，这些自由窗口按照打开或者获取焦点的顺序在Z轴排布。当自由窗口被点击或触摸时，其Z轴高度提升，并获取焦点。
    • 悬浮窗：悬浮窗是一种在设备屏幕上悬浮的非全屏应用窗口。一般用于在已有全屏任务运行的基础上，临时处理另一个任务，或短时间多任务并行使用。如浏览网页的同时回复消息。

窗口模式开发场景

在应用窗口模式变化时，通常伴随窗口尺寸变化，以及页面布局或功能差异。开发者适配多设备上不同窗口模式时，按需对窗口的不同变化做出响应。

监听窗口模式变化

获取窗口尺寸

监听窗口尺寸变化

获取窗口实例对象后，可以通过window.on('windowSizeChange')方法实现对窗口尺寸大小变化的监听。

public onWindowSizeChange: (windowSize: window.Size) => void = (windowSize: window.Size) => {
  this.mainWindowInfo.windowSize = windowSize;
  this.mainWindowInfo.widthBp = this.uiContext!.getWindowWidthBreakpoint();
  this.mainWindowInfo.heightBp = this.uiContext!.getWindowHeightBreakpoint();
};
// ...
updateWindowInfo(): void {
  try {
    // ...
    // Register for window size change monitoring, update window size and width/height breakpoint.
    this.mainWindow.on('windowSizeChange', this.onWindowSizeChange);
    // ...
  } catch (error) {
    let err = error as BusinessError;
    hilog.error(0x0000, `TestLog`, `Failed to update window info. Code: ${err.code}, message: ${err.message}`);
  }
}

在使用多窗口功能时，窗口的尺寸会发生变化，可能影响布局。以下是两种情况的具体描述：

• 进入分屏模式：当手机设备进入分屏模式时，窗口高度缩小为原来的1/2或1/3，宽度保持不变。由于内容页面大小未作相应调整，垂直方向的内容可能被截断，且页面无法滚动查看完整内容。开发者可参考窗口模式变化常见问题。
• 进入竖向悬浮窗模式：在这种模式中，窗口内容会根据窗口大小进行等比缩放。但是，窗口的高宽比变为3:4.575，这与全屏模式（通常为16:9或4:3）的比例不同。纵向比例相对于横向较小，这也可能导致内容截断现象。开发者可参考窗口模式变化常见问题。

定制窗口模式支持策略

如果开发者希望在不同的设备上支持不同的窗口模式，可通过多HAP工程实现。

在单HAP工程下，开发者只能在module.json5中定制一种窗口支持策略。在不同的HAP工程下，开发者可以通过在module.json5配置文件abilities标签下添加supportWindowMode字段，为每个HAP定制一种窗口支持策略。

折叠开合场景下状态监听建议

折叠展开过程中应用可感知的部分回调

屏幕管理的生命周期如下图

分屏窗口模式适配

分屏布局适配

目前支持两种分屏样式：“上下分屏”和“左右分屏”。

分屏比例指的是分屏下两应用间尺寸的比例，调整分屏比例会调整应用窗口的大小。

分屏模式的分屏比例是由产品定义，开发者无法控制。常见产品的分屏比例，可参考下表。

当手机设备进入分屏模式时，窗口高度缩小为原来的1/2或1/3，宽度保持不变。由于内容页面大小未作相应调整，垂直方向的内容可能被截断，且页面无法滚动查看完整内容，开发者可参考窗口模式变化常见问题。

实现应用内分屏

分屏一般用于两个应用长时间并行使用的场景。例如：边看购物攻略边浏览商品；边看视频边玩游戏；看学习类视频的同时做笔记等。除了通过手势触发分屏之外，应用可以自主选择启动分屏。

应用内分屏功能允许声明支持分屏的应用在全屏显示模式下，通过调用startAbility方法启动UIAbility并形成分屏。该功能能够增强应用的多任务处理能力，提升用户的操作体验。

自由窗口模式适配

自由多窗是一种多窗口显示模式，它允许用户在同一屏幕上同时运行多个应用窗口。自由窗口是默认居中启动并向右下方层叠排布，支持无极缩放的窗口。启动后，窗口的大小和位置可自由调整。同一个屏幕上可同时显示多个自由窗口，这些自由窗口按照打开或者获取焦点的顺序在Z轴排布。当自由窗口被点击或触摸时，将导致其Z轴高度提升，并获取焦点。自由窗口下默认显示标题栏，标题栏左侧显示应用图标，右侧显示三键：放大、缩小和关闭，长按或鼠标hover可显示切换至分屏菜单。

• 在电脑设备上，应用启动时默认应为自由窗口模式，而非全屏模式。在适配电脑设备时，存在拖动自由窗口导致尺寸过小而引起页面布局异常的问题，开发者可参考如何限制自由窗窗口尺寸，确保页面正常显示。
• 在平板设备上，用户需要下拉控制中心，点击自由多窗按钮，切换至自由多窗模式，窗口默认以自由窗口层叠显示。进入自由多窗模式后设备强制横屏，不支持切换竖屏。为优化窗口显示内容，DPI默认调整为最小档，并记忆调整前的DPI，用户可在设置-显示和亮度-字体大小和界面缩放中按需调整。退出自由多窗时恢复到记忆的DPI，如果用户在自由多窗模式下主动调整过DPI，则保持当前值不恢复记忆。

如何限制自由窗窗口尺寸

自适应布局可以保证窗口尺寸在一定范围内变化时，页面的显示是正常的。当窗口尺寸变化较大时，就需要额外借助响应式布局能力（如断点等）调整页面结构以保证显示正常。通常每个断点都需要开发者精心适配，以获得最佳的显示效果，考虑到设计及开发成本等实际因素的限制，应用不可能适配从零到正无穷的所有窗口宽度。

不同设备或不同设备状态，系统默认的自由窗口尺寸的调节范围可能不同。开发者可以在module.json5配置文件的abilities标签中限制应用中各个Ability的自由窗口尺寸调节范围。配置文件中影响自由窗口尺寸调节范围的字段如下表所示。

开发者可通过两种方式限制自由窗口的最大和最小尺寸

• 通过配置文件分别限制自由窗口的最大和最小尺寸。

  {
    "module": {
      // ...
      "abilities": [
        {
          // ...
          "minWindowWidth": 320,
          "minWindowHeight": 240,
          "maxWindowWidth": 1440,
          "maxWindowHeight": 900,
          "minWindowRatio": 0.5,
          "maxWindowRatio": 2
        }
      ],
      // ...
    }
  }

  module.json5
• 通过setWindowLimits()接口设置当前应用窗口的尺寸限制。

  setWindowLimits(maxWidth: number, maxHeight: number, minWidth: number, minHeight: number): void {
    let windowLimits: window.WindowLimits = {
      maxWidth: maxWidth,
      maxHeight: maxHeight,
      minWidth: minWidth,
      minHeight: minHeight
    }
    this.mainWindow.setWindowLimits(windowLimits).then((data: window.WindowLimits) => {
      hilog.info(0x0000, 'testLog', `Succeeded in changing the window limits. Cause: ${JSON.stringify(data)}`);
    }).catch((err: BusinessError) => {
      hilog.error(0x0000, 'testLog',
        `Failed to change the window limits. Cause code: ${err.code}, message: ${err.message}`);
    });
  }

  WindowUtil.ets

主动调节窗口大小

改变窗口大小有以下两种方式：

1. 通过窗口热区拖拽进行窗口缩放。

   应用窗口拖拽缩放是在电脑和平板设备上使用自由多窗模式时常见的操作，指鼠标点击或手指触控应用窗口边缘，使得应用窗口跟随鼠标或手指位置移动而变化大小的现象，如下图所示。

   对于窗口拖拽缩放有两种限制方式：

   • setWindowLimits()限制窗口大小；
   • setResizeByDragEnabled()禁止/使能通过拖拽方式缩放主窗口或启用装饰的子窗口的功能。
   说明

   主窗口和带标题栏的子窗口默认可以通过热区拖拽进行窗口大小缩放，不带标题栏的子窗口和悬浮窗不可以通过热区拖拽进行窗口大小缩放。

2. 通过resize()方法修改窗口大小。

   resize(width: number, height: number): void {
     this.mainWindow.resize(width, height, (err: BusinessError) => {
       const errCode: number = err.code;
       if (errCode) {
         hilog.error(0x0000, 'testLog',
           `Failed to change the window size. Cause code: ${err.code}, message: ${err.message}`);
         return;
       }
       hilog.info(0x0000, 'testLog', 'Succeeded in changing the window size.');
     });
   }

   WindowUtil.ets

根据组件内容大小修改浮动窗口

可以通过组件的onAreaChange()方法监听组件区域变化并根据返回的内容大小修改浮动窗口大小。

如何设置窗口拖拽热区

设置应用启动时的窗口模式、大小与位置

电脑上启动应用窗口有两种方式：

1. 通过双击桌面应用图片或点击应用中心图标启动应用。
2. 通过UIAbilityContext.startAbility()接口启动，其中startOption参数设置启动时的窗口模式、所处屏幕id、窗口位置、窗口大小等信息。

应用启动自由窗口时设置主窗口的位置和大小有多种方式，按照生效优先级由高到低排序为：全屏显示 > 使用startOptions参数指定启动窗口的大小和位置 > 使用setWindowRectAutoSave()方法开启窗口尺寸记忆 > 使用metadata标签配置最大化 > 使用metadata标签配置大小和位置。

• 全屏显示
  1. 在module.json5配置文件中的abilities标签下，取消supportWindowMode字段支持的floating，仅配置[fullscreen]或[fullscreen, split]。

     "abilities": [
       {
         "name": "EntryAbility",
         "srcEntry": "./ets/entryability/EntryAbility.ets",
         "supportWindowMode": [
           "fullscreen"
         ],
         // ...
         "description": "$string:EntryAbility_desc",
         "icon": "$media:layered_image",
         "label": "$string:EntryAbility_label",
         "startWindowIcon": "$media:startIcon",
         "startWindowBackground": "$color:start_window_background",
         "exported": true,
         "skills": [
           {
             "entities": [
               "entity.system.home"
             ],
             "actions": [
               "action.system.home"
             ]
           }
         ]
       },
       {
         "name": "SubEntryAbility",
         "srcEntry": "./ets/entryability/SubEntryAbility.ets",
         "supportWindowMode": [
           "fullscreen",
           "floating"
         ],
         "launchType": "specified",
         "description": "$string:EntryAbility_desc",
         "icon": "$media:layered_image",
         "label": "$string:EntryAbility_label",
         "startWindowIcon": "$media:startIcon",
         "startWindowBackground": "$color:start_window_background",
         "exported": true,
         "skills": [
           {
             "entities": [
               "entity.system.home"
             ],
             "actions": [
               "action.system.home"
             ]
           }
         ]
       }
     ],

     module.json5
  2. 将startAbility()接口的入参StartOptions选项中的windowMode参数设置为WINDOW_MODE_FULLSCREEN。

     let want: Want = {
       bundleName: 'com.example.pcproject',
       abilityName: 'SubEntryAbility'
     };
     try {
       (this.getUIContext().getHostContext() as common.UIAbilityContext).startAbility(want, {
         windowMode: AbilityConstant.WindowMode.WINDOW_MODE_FULLSCREEN,
         supportWindowModes: [bundleManager.SupportWindowMode.FULL_SCREEN]
       })
         .then(() => {
           // Carry out normal business operations
           hilog.info(DOMAIN, TAG, '%{public}s', 'startAbility succeed');
         })
         .catch((err: BusinessError) => {
           // Handle business logic errors
           hilog.error(DOMAIN, TAG, '%{public}s',
             `startAbility failed. Cause code: ${err.code}, message: ${err.message}`);
         });
     } catch (err) {
       // Handle the err of incorrect input parameters
       hilog.error(DOMAIN, TAG, '%{public}s',
         `startAbility failed. Cause code: ${err.code}, message: ${err.message}`);
     }

     Index.ets
  3. 将startAbility()接口的入参StartOptions选项中的supportWindowModes参数设置为[bundleManager.SupportWindowMode.FULL_SCREEN]或[bundleManager.SupportWindowMode.FULL_SCREEN, bundleManager.SupportWindowMode.SPLIT]。

     let want: Want = {
       bundleName: 'com.example.pcproject',
       abilityName: 'SubEntryAbility'
     };
     try {
       (this.getUIContext().getHostContext() as common.UIAbilityContext).startAbility(want, {
         supportWindowModes: [bundleManager.SupportWindowMode.FULL_SCREEN]
       })
         .then(() => {
           // Carry out normal business operations
           hilog.info(DOMAIN, TAG, '%{public}s', 'startAbility succeed');
         })
         .catch((err: BusinessError) => {
           // Handle business logic errors
           hilog.error(DOMAIN, TAG, '%{public}s',
             `startAbility failed. Cause code: ${err.code}, message: ${err.message}`);
         });
     } catch (err) {
       // Handle the err of incorrect input parameters
       hilog.error(DOMAIN, TAG, '%{public}s',
         `startAbility failed. Cause code: ${err.code}, message: ${err.message}`);
     }

     Index.ets
     说明

     在UIAbility启动模式为specified模式时，设置StartOptions选项中的supportWindowModes参数不生效。

• StartOptions指定大小位置

  可通过StartOptions选项的windowLeft、windowTop、windowWidth、windowHeight设置窗口的位置和大小。

  let want: Want = {
    bundleName: 'com.example.pcproject',
    abilityName: 'SubEntryAbility'
  };
  try {
    (this.getUIContext().getHostContext() as common.UIAbilityContext).startAbility(want, {
      windowLeft: 700,
      windowTop: 300,
      windowWidth: 1600,
      windowHeight: 1000,
      minWindowWidth: 800,
      minWindowHeight: 600
    })
      .then(() => {
        // Carry out normal business operations
        hilog.info(DOMAIN, TAG, '%{public}s', 'startAbility succeed');
      })
      .catch((err: BusinessError) => {
        // Handle business logic errors
        hilog.error(DOMAIN, TAG, '%{public}s',
          `startAbility failed. Cause code: ${err.code}, message: ${err.message}`);
      });
  } catch (err) {
    // Handle the err of incorrect input parameters
    hilog.error(DOMAIN, TAG, '%{public}s',
      `startAbility failed. Cause code: ${err.code}, message: ${err.message}`);
  }

  Index.ets
• 窗口尺寸记忆(目前只支持电脑)

  在同一个UIAbility下，应用可以通过setWindowRectAutoSave()接口开启窗口记忆，记忆最后关闭的主窗口尺寸，此主窗口再次启动时，以记忆的尺寸按照规则进行打开。

  在同一个UIAbility下，也可以通过setWindowRectAutoSave(enabled: boolean, isSaveBySpecifiedFlag: boolean) 接口，针对每个主窗口尺寸单独进行记忆，只有在UIAbility启动模式为specified模式，且isSaveBySpecifiedFlag设置为true时，才能针对每个主窗口尺寸进行单独记忆。

  窗口记忆规则及示例代码可参考setWindowRectAutoSave() 和setWindowRectAutoSave(enabled: boolean, isSaveBySpecifiedFlag: boolean) 。

• metadata标签配置大小和位置

  配置主窗启动时是否以最大化状态显示，可以在module.json5的metadata标签属性字段中添加name为ohos.ability.window.isMaximize，value取值为true的配置项。其中，value的取值为true或false，取值为true表示最大化启动，取值为false表示不以最大化状态启动，未配置时默认为false。该方案可以避免在onWindowStageCreate里调用maximize出现闪烁的现象。

  也可以在metadata标签中配置窗口启动时的大小和位置，具体属性字段和使用方式可参考窗口元数据配置。

  说明

  主窗最大化显示需满足supportWindowMode字段配置中必须包含fullscreen和floating选项。

  如果窗口设置的大小和位置超出屏幕之外，会自动调整至当前屏幕内。

  当left和top都不配置或配置不生效时，按照系统层叠规则显示。

• 窗口层叠规格
  展开

  规格名称	规格描述
  窗口默认大小	应用首次启动窗口默认大小：宽高各占屏幕尺寸的67%，在工作区（去除Dock和状态栏的屏幕区域）居中显示。
  系统尺寸限制	自由窗口的系统默认最小宽度为320vp，最小高度为72vp，最大宽度和高度都为3840vp；应用未设置windowLimits时，通过window.getWindowLimits()接口会默认返回前面系统的尺寸限制。
  默认窗口模式	支持floating模式的窗口，默认以自由窗口方式打开。

  多自由窗口层叠规则：

  1. 找到除了置顶窗口外的最上层窗口(包括后台窗口)，作为基准，进行层叠显示(分别向右和向下偏移)；
  2. 如果偏移后的窗口位置有部分超出了工作区，则将超出方向的坐标位置修改为工作区的起点位置；
  3. 支持多实例的应用，打开第二个窗口时，参考上一个多实例窗口的位置进行层叠。

悬浮窗口模式适配

针对应用进入悬浮窗出现的页面内容截断、挤压、堆叠等问题，开发者可以参考多设备界面开发中的界面布局响应式变化和界面元素自适应变化内容，使应用可以自适应窗口的大小变化。

常见悬浮布局适配问题分为以下三类

• 布局适配问题：这类问题一般是由于进入分屏/悬浮窗时，由于窗口高度缩小，导致的布局混乱、被截断等问题。
• 沉浸模式下顶部窗口控制条避让问题：在沉浸模式下，应用分屏后视图和悬浮窗顶部重合的区域无法响应操作的问题。
• 横屏悬浮窗适配问题：对于横向游戏和视频应用横向的悬浮窗适配问题。

窗口模式变化常见问题

界面被截断，无法上下滑动，应用分屏后内容显示不全，无法通过上下滑动展示未显示的内容

XComponent视频画面在分屏页面显示不全，视频播放界面分屏后，视频被截断显示不全

Video组件在分屏状态下截断，Video组件在分屏状态下，视频播放界面被截断显示不全

子组件超出父组件的范围，子组件显示超出了父组件范围，无法通过上下滑动显示完全

Image组件在分屏状态下显示异常，应用进入分屏后，随着窗口变小，Image组件显示不全，页面布局显示异常

弹窗布局错乱，进入分屏后弹窗页面内容显示错乱，底部按钮挡住弹窗内容

沉浸模式下顶部窗口控制条避让问题

沉浸式应用在悬浮窗场景下，顶部操作栏无法操作，应用分屏后，视图和悬浮窗顶部重合的区域无法响应操作。

原因

沉浸式应用顶部没有避让，导致悬浮窗顶部bar与应用的顶部区域重叠，重叠区域中的按钮无法响应点击事件。

@Component
export struct Question7Incorrect {
  private windowClass: window.Window | undefined = undefined;

  aboutToAppear(): void {
    try {
      this.windowClass=(this.getUIContext().getHostContext() as common.UIAbilityContext).windowStage.getMainWindowSync();
      this.windowClass.setSpecificSystemBarEnabled('status', false).catch((error:BusinessError) => {
        Logger.error(TAG, `setSpecificSystemBarEnabled err, code: ${error.code}, mesage: ${error.message}`);
      });
    } catch (err) {
      let error = err as BusinessError;
      Logger.error(TAG, `aboutToAppear err, code: ${error.code}, mesage: ${error.message}`);
    }
  }

  aboutToDisappear(): void {
    this.windowClass?.setSpecificSystemBarEnabled('status', true).catch((error:BusinessError) => {
      Logger.error(TAG, `setSpecificSystemBarEnabled err, code: ${error.code}, mesage: ${error.message}`);
    });
  }

  build() {
    NavDestination() {
      Stack() {
        // ...

        Row() {
          Image($r('app.media.icon_pause'))
            // ...
            .onClick(() => {
              try {
                this.getUIContext().getPromptAction().showToast({
                  message: 'Action success'
                });
              } catch (err) {
                let error = err as BusinessError;
                Logger.error(TAG, `showToast err, code: ${error.code}, mesage: ${error.message}`);
              }
            })
        }
        .height('100%')
        .width('100%')
        .justifyContent(FlexAlign.End)
        .alignItems(VerticalAlign.Top)
      }
    }
    .hideTitleBar(true)
  }
}

解决措施

通过getWindowAvoidArea()可获取屏幕顶部需要规避的矩阵区域topRect，获取到该值后应用可对应做布局避让。同时，可通过on('avoidAreaChange')监听系统规避区域变化以进行布局的动态调整。具体可以参考顶部窗口控制条避让适配智慧多窗。

@Component
export struct Question7Correct {
  private windowClass: window.Window | undefined = undefined;
  @State topSafeHeight: number = 0;
  @State windowStatus: WindowStatusType = window.WindowStatusType.FULL_SCREEN;

  aboutToAppear(): void {
    try {
      this.windowClass=(this.getUIContext().getHostContext() as common.UIAbilityContext).windowStage.getMainWindowSync();
      this.windowClass.setSpecificSystemBarEnabled('status', false).catch((error:BusinessError) => {
        Logger.error(TAG, `setSpecificSystemBarEnabled err, code: ${error.code}, mesage: ${error.message}`);
      });
      this.windowStatus = this.windowClass.getWindowStatus();

      if (this.windowStatus === window.WindowStatusType.FLOATING) {
        this.topSafeHeight = this.getUIContext()
          .px2vp(this.windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height);
      }

      this.windowClass.on('windowStatusChange', data => {
        if (data === window.WindowStatusType.FLOATING) {
          this.topSafeHeight =
            this.getUIContext()
              .px2vp(this.windowClass?.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height);
        } else {
          this.topSafeHeight = 0;
        }
      })
    } catch (err) {
      let error = err as BusinessError;
      Logger.error(TAG, `aboutToAppear err, code: ${error.code}, mesage: ${error.message}`);
    }
  }

  aboutToDisappear(): void {
    this.windowClass?.setSpecificSystemBarEnabled('status', true).catch((error:BusinessError) => {
      Logger.error(TAG, `setSpecificSystemBarEnabled err, code: ${error.code}, mesage: ${error.message}`);
    });
  }

  build() {
    // ...
  }
}

优化后效果如下图所示。

视频或游戏类应用在横屏模式下开启悬浮窗，若应用未适配横屏悬浮窗，可能会导致内容显示不全，影响用户体验

原因

悬浮窗默认是竖屏，需要应用主动适配横屏的属性值。

@Component
export struct Question8Incorrect {
  build() {
    NavDestination() {
      Column() {
        Video({ src: $rawfile('testVideo1.mp4') })
          .height('100%')
          .width('100%')
          .autoPlay(true)
          .objectFit(ImageFit.Contain)
          .controls(false)
      }
      .height('100%')
      .width('100%')
    }
    .hideTitleBar(true)
  }
}

解决措施

开发者可以通过在module.json5配置文件中abilities标签下的preferMultiWindowOrientation属性增加"landscape_auto"。

{
  "module": {
    // ...
    "abilities": [
      {
        "name": "EntryAbility",
        // ...
        "preferMultiWindowOrientation": "landscape_auto",
        // ...
      }
    ],
    // ...
  }
}

该场景下多窗布局动态可变为横向，需要配合API（enableLandscapeMultiWindow()/disableLandscapeMultiWindow()）使用。

@Component
export struct Question8Correct {
  private windowClass: window.Window | undefined = undefined;

  aboutToAppear(): void {
    try {
      this.windowClass=(this.getUIContext().getHostContext() as common.UIAbilityContext).windowStage.getMainWindowSync();
      this.windowClass.enableLandscapeMultiWindow().catch((error:BusinessError) => {
        Logger.error(TAG, `enableLandscapeMultiWindow err, code: ${error.code}, mesage: ${error.message}`);
      });
    } catch (err) {
      let error = err as BusinessError;
      Logger.error(TAG, `aboutToAppear err, code: ${error.code}, mesage: ${error.message}`);
    }


  }

  aboutToDisappear(): void {
    this.windowClass?.disableLandscapeMultiWindow().catch((error:BusinessError) => {
      Logger.error(TAG, `disableLandscapeMultiWindow err, code: ${error.code}, mesage: ${error.message}`);
    });
  }

  build() {
    // ...
  }
}

优化后效果如下图所示。