HarmonyOS 应用开发之管理应用窗口（FA模型）

基本概念

窗口沉浸式能力：指对状态栏、导航栏等系统窗口进行控制，减少状态栏导航栏等系统界面的突兀感，从而使用户获得最佳体验的能力。 沉浸式能力只在应用主窗口作为全屏窗口时生效。通常情况下，应用子窗口（弹窗、悬浮窗口等辅助窗口）和处于自由窗口下的应用主窗口无法使用沉浸式能力。

场景介绍

在FA模型下，管理应用窗口的典型场景有：

• 设置应用子窗口属性及目标页面
• 体验窗口沉浸式能力

以下分别介绍具体开发方式。

接口说明

上述场景涉及的常用接口如下表所示。

设置应用子窗口

开发者可以按需创建应用子窗口，如弹窗等，并对其进行属性设置等操作。

开发步骤

1. 创建/获取子窗口对象。

   • 可以通过window.createWindow接口创建子窗口。
   • 也可以通过window.findWindow接口来查找已经创建的窗口从而得到子窗口。

import window from '@ohos.window';
import { BusinessError } from '@ohos.base';

let windowClass: window.Window | null = null;
// 方式一：创建子窗口。
let config: window.Configuration = { name: "subWindow", windowType: window.WindowType.TYPE_APP };
window.createWindow(config, (err: BusinessError, data) => {
  let errCode: number = err.code;
  if (errCode) {
    console.error('Failed to create the subWindow. Cause: ' + JSON.stringify(err));
    return;
  }
  console.info('Succeeded in creating subWindow. Data: ' + JSON.stringify(data));
  windowClass = data;
});
// 方式二：查找得到子窗口。
try {
  windowClass = window.findWindow('subWindow');
} catch (exception) {
  console.error('Failed to find the Window. Cause: ' + JSON.stringify(exception));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2. 设置子窗口属性。

   子窗口创建成功后，可以改变其大小、位置等，还可以根据应用需要设置窗口背景色、亮度等属性。

// 移动子窗口位置。
let windowClass: window.Window = window.findWindow("test");
windowClass.moveWindowTo(300, 300, (err: BusinessError) => {
  let errCode: number = err.code;
  if (errCode) {
    console.error('Failed to move the window. Cause:' + JSON.stringify(err));
    return;
  }
  console.info('Succeeded in moving the window.');
});
// 改变子窗口大小。
windowClass.resize(500, 500, (err: BusinessError) => {
  let errCode: number = err.code;
  if (errCode) {
    console.error('Failed to change the window size. Cause:' + JSON.stringify(err));
    return;
  }
  console.info('Succeeded in changing the window size.');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 加载显示子窗口的具体内容。

使用setUIContent和showWindow接口加载显示子窗口的具体内容。

// 为子窗口加载对应的目标页面。
let windowClass: window.Window = window.findWindow("test");
windowClass.setUIContent("pages/page2", (err: BusinessError) => {
  let errCode: number = err.code;
  if (errCode) {
    console.error('Failed to load the content. Cause: ' + JSON.stringify(err));
    return;
  }
  console.info('Succeeded in loading the content.');
  // 显示子窗口。
  windowClass.showWindow((err: BusinessError) => {
    let errCode: number = err.code;
    if (errCode) {
      console.error('Failed to show the window. Cause: ' + JSON.stringify(err));
      return;
    }
    console.info('Succeeded in showing the window.');
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4. 销毁子窗口。

   当不再需要某些子窗口时，可根据场景的具体实现逻辑，使用destroyWindow接口销毁子窗口。

// 销毁子窗口。当不再需要某些子窗口时，可根据场景的具体实现逻辑，使用destroy接口销毁子窗口。
let windowClass: window.Window = window.findWindow("test");
windowClass.destroyWindow((err: BusinessError) => {
  let errCode: number = err.code;
  if (errCode) {
    console.error('Failed to destroy the subwindow. Cause:' + JSON.stringify(err));
    return;
  }
  console.info('Succeeded in destroying the subwindow.');
});
1
2
3
4
5
6
7
8
9
10

体验窗口沉浸式能力

在看视频、玩游戏等场景下，用户往往希望隐藏状态栏、导航栏等不必要的系统窗口，从而获得更佳的沉浸式体验。此时可以借助窗口沉浸式能力（窗口沉浸式能力都是针对应用主窗口而言的），达到预期效果。从API version 10开始，沉浸式窗口默认配置为全屏大小并由组件模块控制布局，状态栏、导航栏背景颜色为透明，文字颜色为黑色；应用窗口调用setWindowLayoutFullScreen接口，设置为true表示由组件模块控制忽略状态栏、导航栏的沉浸式全屏布局，设置为false表示由组件模块控制避让状态栏、导航栏的非沉浸式全屏布局。

开发步骤

1. 获取主窗口对象。

说明：
沉浸式能力需要在成功获取应用主窗口对象的前提下进行。

确保应用内最后显示的窗口为主窗口，然后再使用window.getLastWindow接口来获取得到主窗口。

import window from '@ohos.window';
import { BusinessError } from '@ohos.base';

let mainWindowClass: window.Window | null = null;

// 获取主窗口。
class BaseContext {
  stageMode: boolean = false;
}

let context: BaseContext = { stageMode: false };
window.getLastWindow(context, (err: BusinessError, data) => {
  let errCode: number = err.code;
  if (errCode) {
    console.error('Failed to get the subWindow. Cause: ' + JSON.stringify(err));
    return;
  }
  console.info('Succeeded in getting subWindow. Data: ' + JSON.stringify(data));
  mainWindowClass = data;
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2. 实现沉浸式效果。有以下两种方式：

   • 方式一：应用主窗口为全屏窗口时，调用setWindowSystemBarEnable接口，设置导航栏、状态栏不显示，从而达到沉浸式效果。
   • 方式二：调用setWindowLayoutFullScreen接口，设置应用主窗口为全屏布局；然后调用setWindowSystemBarProperties接口，设置导航栏、状态栏的透明度、背景/文字颜色以及高亮图标等属性，使之保持与主窗口显示协调一致，从而达到沉浸式效果。

// 实现沉浸式效果。方式一：设置导航栏、状态栏不显示。
let names: Array<'status' | 'navigation'> = [];
let mainWindowClass: window.Window = window.findWindow("test");
mainWindowClass.setWindowSystemBarEnable(names, (err: BusinessError) => {
 let errCode: number = err.code;
 if (errCode) {
   console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err));
   return;
 }
 console.info('Succeeded in setting the system bar to be visible.');
});
// 实现沉浸式效果。
// 方式二：设置窗口为全屏布局，配合设置状态栏、导航栏的透明度、背景/文字颜色及高亮图标等属性，与主窗口显示保持协调一致。
let isLayoutFullScreen: boolean = true;
mainWindowClass.setWindowLayoutFullScreen(isLayoutFullScreen, (err: BusinessError) => {
 let errCode: number = err.code;
 if (errCode) {
   console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
   return;
 }
 console.info('Succeeded in setting the window layout to full-screen mode.');
});
let sysBarProps: window.SystemBarProperties = {
 statusBarColor: '#ff00ff',
 navigationBarColor: '#00ff00',
 // 以下两个属性从API Version8开始支持。
 statusBarContentColor: '#ffffff',
 navigationBarContentColor: '#ffffff'
};
mainWindowClass.setWindowSystemBarProperties(sysBarProps, (err: BusinessError) => {
 let errCode: number = err.code;
 if (errCode) {
   console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
   return;
 }
 console.info('Succeeded in setting the system bar properties.');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

3. 加载显示沉浸式窗口的具体内容。

   使用setUIContent和showWindow接口加载显示沉浸式窗口的具体内容。

// 为沉浸式窗口加载对应的目标页面。
let mainWindowClass: window.Window = window.findWindow("test");
mainWindowClass.setUIContent("pages/page3", (err: BusinessError) => {
  let errCode: number = err.code;
  if (errCode) {
    console.error('Failed to load the content. Cause: ' + JSON.stringify(err));
    return;
  }
  console.info('Succeeded in loading the content.');
  // 显示沉浸式窗口。
  mainWindowClass.showWindow((err: BusinessError) => {
    let errCode: number = err.code;
    if (errCode) {
      console.error('Failed to show the window. Cause: ' + JSON.stringify(err));
      return;
    }
    console.info('Succeeded in showing the window.');
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：

如何快速入门：https://qr21.cn/FV7h05

1. 基本概念
2. 构建第一个ArkTS应用
3. ……

开发基础知识：https://qr21.cn/FV7h05

1. 应用基础知识
2. 配置文件
3. 应用数据管理
4. 应用安全管理
5. 应用隐私保护
6. 三方应用调用管控机制
7. 资源分类与访问
8. 学习ArkTS语言
9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

1. Ability开发
2. UI开发
3. 公共事件与通知
4. 窗口管理
5. 媒体
6. 安全
7. 网络与链接
8. 电话服务
9. 数据管理
10. 后台任务(Background Task)管理
11. 设备管理
12. 设备使用信息统计
13. DFX
14. 国际化开发
15. 折叠屏系列
16. ……

鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向