文章目录
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) ?? '');
});
});
}