本文主要介绍如何利用应用子窗口实现应用内全局悬浮窗,创建应用子窗口需要先拿到窗口管理器 WindowStage 对象,在 EntryAbility.onWindowStageCreate() 回调中取。
FloatManager.init(windowStage)
init(windowStage: window.WindowStage) {
this.windowStage_ = windowStage
}
然后通过 WindowStage.createSubWindow() 创建子窗口。
// 创建子窗口
showSubWindow() {
if (this.windowStage_ == null) {
Log.error(TAG, 'Failed to create the subwindow. Cause: windowStage_ is null');
} else {
this.windowStage_.createSubWindow("HarmonyWorld", (err: BusinessError, data) => {
...
this.sub_windowClass = data;
// 子窗口创建成功后,设置子窗口的位置、大小及相关属性等
// moveWindowTo 和 resize 都可以重复调用,实现拖拽效果
this.sub_windowClass.moveWindowTo(this.locationX, this.locationY, (err: BusinessError) => {
...
});
this.sub_windowClass.resize(this.size, this.size, (err: BusinessError) => {
...
});
// 给子窗口设置内容
this.sub_windowClass.setUIContent("pages/float/FloatPage", (err: BusinessError) => {
...
// 显示子窗口。
(this.sub_windowClass as window.Window).showWindow((err: BusinessError) => {
...
// 设置透明背景
data.setWindowBackgroundColor("#00000000")
});
});
})
}
}
这样就可以在指定位置显示指定大小的的悬浮窗了。然后再接着完善手势拖动和点击事件。
既要监听拖动,又要监听手势,就需要通过 GestoreGroup,并把设置模式设置为 互斥识别。
@Entry
@Component
export struct FloatPage {
private context = getContext(this) as common.UIAbilityContext
build() {
Column() {
Image($r('app.media.mobile_dev'))
.width('100%')
.height('100%')
}
.gesture(
GestureGroup(GestureMode.Exclusive,
// 监听拖动
PanGesture()
.onActionUpdate((event: GestureEvent | undefined) => {
if (event) {
// 更新悬浮窗位置
FloatManager.updateLocation(event.offsetX, event.offsetY)
}
}),
// 监听点击
TapGesture({ count: 1 })
.onAction(() => {
router.pushUrl(...)
}))
)
}
}
在拖动手势 PanGesture 的 onActionUpdate() 回调中,可以实时拿到拖动的距离,然后通过 Window.moveWindowTo() 就可以实时更新悬浮窗的位置了。
updateLocation(offSetX: number, offsetY: number) {
if (this.sub_windowClass != null) {
this.locationX = this.locationX + offSetX
this.locationY = this.locationY + offsetY
this.sub_windowClass.moveWindowTo(this.locationX, this.locationY, (err: BusinessError) => {
......
});
}
}
在点击手势 TapGesture中,我的需求是路由到指定页面,直接调用 router.pushUrl()。看似很正常的调用,在这里确得到了意想不到的结果。
每个 Window 对应自己的 UIContext,UIContext 持有自己的 Router ,所以应用主窗口和应用子窗口的 Router 是相互独立的。
那么,问题就变成了如何在子窗口中让主窗口进行路由跳转?通过 EventHub 或者 emitter 都可以。emiiter 可以跨线程,这里并不需要,EventHub 写起来更简单。我们在点击手势中发送事件:
TapGesture({ count: 1 })
.onAction(() => {
this.context.eventHub.emit("event_click_float")
})
在 EntryAbility 中订阅事件:
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
eventHub.on("event_click_float", () => {
if (this.mainRouter) {
this.mainRouter.pushUrl(...)
}
})
}
这里的 mainRouter 我们可以提前在主 Window 调用 loadContent() 之后获取:
windowStage.loadContent(pages/Index', (err, data) => {
this.mainRouter = this.windowClass!.getUIContext().getRouter()
});
最后还有一个小细节,如果在拖动悬浮窗之后,再使用系统的返回手势,按照预期应该是主窗口的页面返回,但这时候焦点在子窗口,主窗口并不会响应返回手势。
我们需要在子窗口承载的 Page 页面监听 onBackPress(),并通过 EventHub 通知主窗口。
onBackPress(): boolean | void {
this.context.eventHub.emit("float_back")
}
主窗口接收到通知后,调用 mainRouter.back 。
eventHub.on("clickFloat", () => {
if (this.mainRouter) {
this.mainRouter.back()
}
})
应用内全局,可拖拽的悬浮窗就完成了。
为了帮助大家更深入有效的学习到鸿蒙开发知识点,小编特意给大家准备了几套最新版的HarmonyOS NEXT学习资源
获取完整版高清学习路线,请点击→《HarmonyOS教学视频》
HarmonyOS教学视频
鸿蒙语法ArkTS、TypeScript、ArkUI等.....视频教程
鸿蒙生态应用开发白皮书V2.0PDF:
获取白皮书:请点击→《鸿蒙生态应用开发白皮书V2.0PDF》
鸿蒙 (Harmony OS)开发学习手册
一、入门必看
- 应用开发导读(ArkTS)
- ……
二、HarmonyOS 概念
- 系统定义
- 技术架构
- 技术特性
- 系统安全
- ........
三、如何快速入门?《鸿蒙星河版开发教程指南》
- 基本概念
- 构建第一个ArkTS应用
- ……
四、开发基础知识
- 应用基础知识
- 配置文件
- 应用数据管理
- 应用安全管理
- 应用隐私保护
- 三方应用调用管控机制
- 资源分类与访问
- 学习ArkTS语言
- ……
五、基于ArkTS 开发
- Ability开发
- UI开发
- 公共事件与通知
- 窗口管理
- 媒体
- 安全
- 网络与链接
- 电话服务
- 数据管理
- 后台任务(Background Task)管理
- 设备管理
- 设备使用信息统计
- DFX
- 国际化开发
- 折叠屏系列
- ……
更多了解更多鸿蒙开发的相关知识可以参考:《鸿蒙 (Harmony OS)开发学习手册》