窗口开发概述
HarmonyOS通过窗口模块实现窗口管理,包括:
- 针对应用开发者,提供了界面显示和交互能力。
- 针对终端用户,提供了控制应用界面的方式。
- 针对整个操作系统,提供了不同应用界面的组织管理逻辑。
应用窗口的分类
应用窗口是指与应用显示相关的窗口。根据显示内容的不同,应用窗口又分为应用主窗口和应用子窗口两种类型。
- 应用主窗口:应用主窗口用于显示应用界面,会在“任务管理”界面显示
- 应用子窗口:应用子窗口用于显示应用的弹窗、悬浮窗等辅助窗口,不会在“任务管理”界面显示。
窗口模块的用途
窗口提供管理窗口的一些基础能力,包括对当前窗口的创建、销毁、各属性的设置,以及对各窗口间的管理调度。
该模块提供以下窗口相关的常用功能。
- Window:当前窗口实例,窗口管理器管理的基本单元。
- WindowStage:窗口管理器,用于管理各个基本窗口单元。
在HarmonyOS中,窗口模块的主要职责如下;
- 提供应用和系统界面的窗口对象。应用开发者通过窗口加载UI 界面,实现界面显示功能。
- 组织织不同窗口的显示关系,即维护不同窗口间的叠加层次和位置属性。应用和系统的窗口具有多种类型,不同类型的窗口具有不同的账认位置和叠加层次(Z轴高度)。同时,用户操作也可以在一定范围内对窗口的位置和叠加层次进行调整。
- 提供窗口装饰。窗口装饰指窗口标题栏和窗口边框。窗口标題栏通常包括窗口最大化、最小化及关闭按钮等界面元素,具有默认的单击行为,方便用户进行操作;窗口边框则方便用,关注UI代码层面的实现。对窗口进行拖曳缩放等行为。窗口装饰是系统的跌认行为,开发者可选择启用/禁用,无须关注UI代码层面的实现。
- 提供窗口动效。在窗口显示、隐藏及窗口间切换时,窗口模块通常会添加动画效果,以使各交互过程更加连贯流畅。在HarmonyOS中,应用窗口的动效为默认行为,不需要开发进行设置或者修改。
- 指导输入事件分发,即根据当前窗口的状态或焦点进行事件的分发。触摸和鼠标事件根据窗口的位置和尺寸进行分发,而键盘事件会被分发至焦点窗口。应用开发者可以通过窗口模块提供的接口设置窗口是否可以触摸和是否可以获焦。
窗口沉浸式能力
窗口沉浸式能力是指对状态栏、导航栏等系统窗口进行控制,减少状态栏、导航栏等系统,界面的突兀感,从而使用户获得最佳体验的能力。
沉浸式能力只在应用主窗口作为全屏窗口时生效。通常情况下,应用子窗口(弹窗、悬浮等辅助窗口)和处于自由窗口下的应用主窗口无法使用沉浸式能力
代码实现:
在EntryAbility中导入WindowStage:窗口管理器
AppStorage.SetOrCreate("windowStage",windowStage)
创建子窗口:这里是在异步函数中写的子窗口,这样就可以在触发生命周期的时候显示子窗口
注意:子窗口的监听事件是没有写的如有需要可以自行添加,还可以添加各种属性更多属性点击链接查看所需https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/js-apis-window-0000001477981397-V2
//导入模块
import window from '@ohos.window'
@Entry
@Component
export struct SubWindow {
async aboutToAppear() {
//创建子窗口 导入窗口管理器
let windowStage = AppStorage.Get<window.WindowStage>("windowStage")
let subWindow: window.Window = null
windowStage.createSubWindow("SubWindow", (err, date) => {
subWindow = date
// 子窗口创建成功后,设置子窗口的位置
subWindow.moveWindowTo(1000, 300)
// 设置子窗口的大小
subWindow.resize(500, 500)
// 为子窗口加载对应的目标页面。
subWindow.setUIContent("View/SubWindow")
// 显示子窗口。
subWindow.showWindow()
})
}
build() {
Column() {
}
}
}
目标页面:随便写一个Page页面导入子窗口页面代码就欧克了
import window from '@ohos.window'
@Entry
@Component
struct Index {
@State message: string = '子窗口加载页面'
private sub: window.Window
aboutToAppear() {
this.sub = window.findWindow('SubWindow')
}
build() {
Column() {
Text(this.message)
.fontSize(30)
}.width('100%').height('100%').backgroundColor(Color.Pink)
}
}
效果图:
今日内容就完成了,希望能帮助到各位朋友,最后愿在座的都能在陌生的人山人海中,找到自由的誓约