HarmonyOS学习(九)——窗口管理
文章目录
- 1、窗口开发概述
- 1.1、应用窗口的分类
- 1.2、窗口模块的用途
- 1.3、窗口沉浸式能力
- 2、窗口管理
- 2.1、 设置应用主窗口的属性及目标界面
- 2.2、设置应用子窗口的属性及目标界面
- 2.3、窗口沉浸式能力
- 3、沉浸式实例
1、窗口开发概述
1.1、应用窗口的分类
应用窗口是指与应用显示相关的窗口。根据显示内容的不同，应用窗口分为** 应用主窗口** 和 应用子窗口
| 应用主窗口 | 应用主窗口用于显示应用界面，会在“任务管理”界面显示 |
|---|---|
| 应用子窗口 | 应用子窗口用于显示应用的弹窗，悬浮窗等辅助窗口，不会在“任务管理”界面显示 |
1.2、窗口模块的用途
窗口提供管理窗口的一些基础能力，包括对当前窗口的创建、销毁、各属性的设置。以及对各窗口的管理调度。
窗口模块的主要职责如下：
| 提供应用和系统界面的窗口对象 | 应用开发者通过窗口加载UI界面，实现界面显示功能 |
|---|---|
| 组织不同窗口的显示关系 | 维护不同窗口间的叠加层次和位置属性，应用和系统的窗口具有多种类型。不同类型的窗口具有不同的默认位置和叠加层次。同时，用户操作也可以在一定范围内对窗口的位置和叠加层次进行调整。 |
| 提供窗口装饰 | 窗口装饰指窗口标题栏和窗口边距。窗口标题栏通常包括窗口最大化、最小化以及关闭按钮等界面元素。 |
| 提供窗口动效 | 在窗口显示、隐藏以及窗口切换时，窗口模块通常会添加动画效果，以使交互更加流畅 |
| 指导输入事件分发 | 根绝当前窗口的状态或焦点进行事件的分发。触摸和鼠标事件根据窗口的位置和尺寸进行分发，而键盘事件会被分发到焦点窗口。应用开发者可以通过窗口模块提供的接口设置窗口是否可以触摸，是否占据焦点 |
1.3、窗口沉浸式能力
窗口沉浸式能力是对状态栏、导航栏等系统窗口进行控制，减少状态栏、导航栏等系统界面的突兀感
沉浸式能力只应用在主窗口作为全屏窗口时生效。弹窗、悬浮窗等辅助窗口无法使用沉浸式能力。
2、窗口管理
2.1、 设置应用主窗口的属性及目标界面
在Stage模型下，应用窗口由Ability创建并维护生命周期。在Ability的onWindowStageCreate回调中，通过windowStage获取应用主窗口，即可对其进行属性设置等操作。
常用API
| getMainWindow(callback:AsyncCallback) | 获取windStage实例下的主窗口 |
|---|---|
| loadContent(path:string,callback:AsyncCallback) | 为当前windowStage的主窗口加载具体页面 |
| setBrightness(brightnedd:number,callback:AsyncCallback) | 设置屏幕亮度值 |
| setTouchable(isTouchable:boolean,callback:AsyncCallback) | 设置窗口是否为可触状态 |
2.2、设置应用子窗口的属性及目标界面
开发者可以按需创建应用子窗口，如弹窗，并对其进行属性设置等操作。
| createSubWindow(name:string.callback:AsyncCallback) | 创建子窗口 |
|---|---|
| loadContent(path:string,callback:AsyncCallback) | 为当前窗口加载具体页面 |
| show(callback:AsyncCallback) | 显示当前窗口 |
2.3、窗口沉浸式能力
实现沉浸式效果有两种方法
- 调用setFullScreen接口，设置应用主窗口为全屏显示，此时导航栏，状态栏将隐藏，从而达到沉浸式效果。
- 调用setSystemBarEnable接口。设置导航栏，状态栏不显示，从而达到沉浸式效果。
3、沉浸式实例
onWindowStageCreate(windowStage: window.WindowStage) {
// Main window is created, set main page for this ability
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
// 获取应用主窗口
let windowClass = null;
windowStage.getMainWindow((err, data) => {
if (err.code) {
console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
return;
}
windowClass = data;
console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));
// 实现沉浸式效果，设置应用主窗口为全屏显示。
let isFullScreen = true;
windowClass.setFullScreen(isFullScreen, (err) => {
if (err) {
console.error('Failed to enable the full-screen mode. Cause:' + JSON.stringify(err));
return;
}
console.info('Succeeded in enabling the full-screen mode.');
});
windowStage.loadContent('pages/Index', (err, data) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
});
});
}