1. 画中画（PiP, Picture-in-Picture）

说明

画中画适用于视频播放、视频会议、视频通话、直播等场景，允许应用将视频内容以小窗形式显示，用户可进行其他界面操作。仅支持 XComponent 作为媒体流播放组件，type 必须为 ‘surface’ 或 XComponentType.SURFACE。

核心代码

import { PiPWindow } from '@kit.ArkUI';
let config: PiPWindow.PiPConfiguration = {
  context: getContext(this),
  componentController: this.xComponentController,
  templateType: PiPWindow.PiPTemplateType.VIDEO_PLAY,
  contentWidth: 400,
  contentHeight: 240,
};
let pipController = await PiPWindow.create(config);
pipController.startPiP(); // 启动画中画
pipController.stopPiP();  // 停止画中画

实现讲解

• 需 XComponent 控制器，type 为 ‘surface’。
• 通过 PiPWindow.create 创建控制器，配置模板类型、内容尺寸。
• startPiP/stopPiP 控制小窗显隐。
• 支持自定义 UI 控制器、状态监听、自动启动等。

---

2. 异形窗口（非矩形窗口）

说明

异形窗口指非矩形的窗口，如圆形、三角形、不规则形状等，适用于放大镜、气泡提示、悬浮窗等场景，提升UI交互多样性。通过 setWindowMask 接口设置掩码数组实现。

核心代码

const subWindow = await windowStage.createSubWindow('mySubWindow');
subWindow.moveWindowTo(300, 300);
subWindow.resize(500, 500);
subWindow.setUIContent('pages/SubPage');
function getCircleMask(width: number, height: number): number[][] {
  const radius = Math.min(width, height) / 2;
  const maskArray = new Array(height).fill(null).map(() => new Array(width).fill(0));
  for (let i = 0; i < height; i++) {
    for (let j = 0; j < width; j++) {
      if ((i - height / 2) ** 2 + (j - width / 2) ** 2 <= radius ** 2) {
        maskArray[i][j] = 1;
      }
    }
  }
  return maskArray;
}
subWindow.setWindowMask(getCircleMask(500, 500));
subWindow.showWindow();

实现讲解

• 创建子窗口后，设置掩码（二维数组，0透明1不透明）控制窗口形状。
• 掩码数组需与窗口宽高一致。
• 可通过算法生成任意形状掩码。

---

3. 分屏窗口

说明

分屏允许两个应用同时显示于屏幕两侧，适用于多任务处理、对比浏览、边看视频边聊天等。应用需在 module.json5 中声明 supportWindowMode 支持 ‘split’。

核心代码

const windowClass = await windowStage.getMainWindow();
windowClass.setWindowMode(window.WindowMode.WINDOW_MODE_SPLIT_PRIMARY);

实现讲解

• WINDOW_MODE_SPLIT_PRIMARY 表示主分屏，WINDOW_MODE_SPLIT_SECONDARY 表示副分屏。
• 可通过拖动分割线调整比例。
• 支持响应式布局，根据窗口尺寸动态适配UI。

---

4. 投屏窗口

说明

投屏将手机/平板内容投射到大屏设备（如电视、智慧屏），适用于演示、视频投播、多屏协作等。通过 avSession 获取可用投屏设备，启动 UIAbility 到扩展屏。

核心代码

import { avSession } from '@kit.AVSessionKit';
const session = await avSession.createAVSession(context, 'CastDisplay', 'video');
const displays = await session.getAllCastDisplays();
if (displays.length > 0) {
  const targetDisplay = displays[0];
  context.startAbilityForResult({
    deviceId: targetDisplay.id,
    bundleName: 'com.example.app',
    abilityName: 'MainAbility',
  });
}

实现讲解

• 通过 avSession 获取可用投屏设备。
• 启动 UIAbility 到扩展屏，实现双屏协作。
• 支持镜像模式和扩展屏模式。

---

5. 缩放窗（自由窗口）

说明

自由窗口可自由拖动、缩放，支持多窗口叠加，适用于桌面级多任务、笔记辅助等。通过 WINDOW_MODE_FLOATING 设置。

核心代码

const subWindow = await windowStage.createSubWindow('floatWindow');
subWindow.setWindowMode(window.WindowMode.WINDOW_MODE_FLOATING);
subWindow.resize(400, 300);
subWindow.moveWindowTo(100, 100);
subWindow.showWindow();

实现讲解

• WINDOW_MODE_FLOATING 设置为悬浮自由窗。
• 可动态调整大小和位置，支持边缘拖动。
• 适用于辅助工具、快捷操作等场景。

---

6. 实况窗/弦月窗（鸿蒙4新增）

说明

实况窗（手机）和弦月窗（手表）用于在状态栏或边缘显示应用状态，如外卖进度、打车状态等。支持胶囊态和卡片态两种形态，由系统自动管理显示。

实现讲解

• 系统级通知能力，无需主动开发窗口。
• 应用通过通知权限触发，系统自动管理显示。
• 支持胶囊态和卡片态两种形态。

---

7. 全局弹窗/子窗口弹窗

说明

全局弹窗用于全局通知、确认框、广告等，可跨页面显示。通过 createSubWindow 创建子窗口实现。

核心代码

const subWindow = await windowStage.createSubWindow('globalDialog');
subWindow.setUIContent('pages/DialogPage');
subWindow.showWindow();

实现讲解

• 子窗口生命周期依附主窗口。
• 可封装为全局工具类，实现一句调用弹窗。

---

8. 横竖屏切换窗口

说明

根据设备方向或业务需求动态切换窗口方向，如视频播放、游戏等。通过 setPreferredOrientation 控制窗口方向。

核心代码

const windowClass = await windowStage.getMainWindow();
windowClass.setPreferredOrientation(window.Orientation.LANDSCAPE); // 横屏
windowClass.setPreferredOrientation(window.Orientation.PORTRAIT);  // 竖屏

实现讲解

• 通过 setPreferredOrientation 控制窗口方向。
• 支持自动旋转、强制横竖屏等模式。

---

9. 沉浸式窗口

说明

隐藏状态栏、导航栏等系统UI，适用于游戏、视频、阅读等全屏体验。通过 setWindowSystemBarEnable 控制系统栏显隐。

核心代码

const windowClass = await windowStage.getMainWindow();
windowClass.setWindowSystemBarEnable([]); // 隐藏状态栏和导航栏

实现讲解

• 通过 setWindowSystemBarEnable 控制系统栏显隐。
• 仅全屏模式生效。

---

10. 多屏协作窗口

说明

多屏协作支持跨设备窗口联动，如手机与平板、PC协同操作。依赖分布式能力，窗口可跨设备流转。

实现讲解

• 依赖分布式能力，窗口可跨设备流转。
• 适用于办公、创作等复杂场景。

---

11. 智慧多窗（悬浮窗/分屏）

说明

智慧多窗是一种多任务处理解决方案，允许用户在同一时间、同一屏幕上以悬浮窗或分屏的方式同时运行多个应用窗口。应用需在 module.json5 中声明 supportWindowMode 支持 ‘floating’ 和 ‘split’。

实现讲解

• 悬浮窗类型：竖向悬浮窗（新闻资讯、社交、购物）、横向悬浮窗（游戏、视频）。
• 分屏触发方式：手势触发、通知消息下拉触发。
• 应用布局需适配不同窗口尺寸和比例。

---

12. 弦月窗（手表端实况窗）

说明

弦月窗是手表端的实况窗功能，与手机实况窗一脉相承，临近提醒抬腕可见。需在手表设置中开启弦月窗开关，并在手机运动健康应用中打开相关应用的通知开关。

实现讲解

• 手表设置路径：设置 > 表盘和桌面 > 弦月窗。
• 手机设置路径：运动健康应用 > 设备管理 > 消息通知。
• 支持日历、智慧助手・今天及相关应用的通知同步。

---

总结

鸿蒙窗口开发能力覆盖了从传统矩形窗口到异形、画中画、分屏、投屏、自由窗、实况窗、全局弹窗、横竖屏、沉浸式、多屏协作、智慧多窗、弦月窗等所有主流窗口形态。开发者可根据业务需求灵活选择和组合，实现丰富的多窗口交互体验。