HarmonyOS 鸿蒙Next之智慧多窗

一、概述

智慧多窗是一种多任务处理解决方案，它允许用户在同一时间、同一屏幕上以悬浮窗或分屏的方式同时运行多个应用窗口。在智慧多窗的显示模式下，用户可以根据自己的需求，合理安排应用窗口的位置和大小。

二、触发方法

1、手势触发，全屏时，从屏幕底部向上滑到右上方行程悬浮窗，滑到左上方形成分屏

2、通知中心下拉触发悬浮窗模式

三、使用场景

1、悬浮窗是一种在设备屏幕上悬浮的、非全屏的应用窗口。一般用于在已有全屏任务运行的基础上，临时处理另一个任务，或短时间多任务并行使用。如浏览网页的同时回复消息。

2、分屏一般用于两个应用长时间并行使用的场景。例如边看购物攻略、边浏览商品；边看视频、边玩游戏；看学习类视频的同时做笔记等。

四、适配方案

1、在应用module.json5配置文件中添加声明属性,

supportWindowMode属性增加“floating”字段或使用缺省值以声明应用支持悬浮窗，增加“split”字段或使用缺省值以声明应用支持分屏

2、页面布局适配

1、EntryAbility里的onWindowStageCreate方法里注册窗口尺寸变化事件监听windowSizeChange，其中常量统一定义在BreakpointConstants中

  static readonly AppStoreKey_ScreenHeight = "screenHeight";
  static readonly AppStoreKey_ScreenWidth = "screenWidth";

windowStage.getMainWindow((err: BusinessError, data: window.Window) => {
      if (err.code) {
        return;
      }
      let windowClass: window.Window = data;
      try {
        // 获取窗口尺寸，存入AppStorage
        AppStorage.setOrCreate(BreakpointConstants.AppStoreKey_ScreenWidth, px2vp(windowClass.getWindowProperties().windowRect.width))
        AppStorage.setOrCreate(BreakpointConstants.AppStoreKey_ScreenHeight,  px2vp(windowClass.getWindowProperties().windowRect.height))
        // 监听窗口尺寸变化
        windowClass.on('windowSizeChange', (windowSize) => {
          AppStorage.setOrCreate(BreakpointConstants.AppStoreKey_ScreenWidth,  px2vp(windowSize.width))
          AppStorage.setOrCreate(BreakpointConstants.AppStoreKey_ScreenHeight, px2vp(windowSize.height))
        })
      } catch {
      }
    });

2、UI侧通过@StorageProp绑定窗口尺寸后，AppStorage中属性key值对应的数据一旦改变，UI侧会同步修改。

@Entry
@Component
struct FirstPage {
  @State message: string = 'Hello World';
  // 初始化参数
  [@StorageProp](/user/StorageProp)(BreakpointConstants.AppStoreKey_ScreenWidth) screenWidth: number = 0;
  [@StorageProp](/user/StorageProp)(BreakpointConstants.AppStoreKey_ScreenHeight) screenHeight: number = 0;

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('FirstPageHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })

      Row() {
        Image($r('app.media.add_file'))
          .width(50)
          .height(50)
          .objectFit(ImageFit.ScaleDown)
          .onClick(() => {
          })
      }.size({
        width:this.screenWidth,
        height:this.screenHeight/3
      })
      .backgroundColor(Color.Green)
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
    .width('100%')
  }
}

3、应用内分屏

应用内分屏功能允许应用在全屏显示模式下，通过调用startAbility方法启动UIAbility并形成分屏。

1、在应用新增分屏调用的EntryAbility1和EntryAbility2

2、在应用中获取UIAbilityContext 对象，这是启动分屏所必需的上下文对象，用于后续调用startAbility接口。

3、调用startAbility接口启动UIAbility，形成分屏。

注：bundleName是应用的app.json里的bundleName，windowMode设置左侧分屏还是右侧分屏，只有在设备横屏情况下生效。

Button() {
          Text('启动应用内分屏')
        }
        .height(40)
        .onClick(() => {
          let context = getContext(this) as common.UIAbilityContext;
          let want: Want = { bundleName: 'com.example.flutter_ohos22', abilityName: 'EntryAbility1', moduleName: '' };
          // 创建StartOptions并设置窗口模式为分屏模式，左侧分屏
          let option: StartOptions = { windowMode: AbilityConstant.WindowMode.WINDOW_MODE_SPLIT_PRIMARY };
          try {
            context.startAbility(want, option, (error) => {
              if (error.code) {
                return;
              }
            });
          } catch (paramError) {
          }
        })

        Button() {
          Text('启动另一分屏窗口')
        }
        .height(40)
        .onClick(() => {
          let context = getContext(this) as common.UIAbilityContext;
          let want: Want = { bundleName: 'com.example.flutter_ohos22', abilityName: 'EntryAbility2', moduleName: '' };
          // 指定启动EntryAbility2的窗口模式，右侧分屏
          let option: StartOptions = { windowMode: AbilityConstant.WindowMode.WINDOW_MODE_SPLIT_SECONDARY };
          context.startAbility(want, option);
        })

在平板上的效果如图：