鸿蒙实战开发：【实现应用悬浮窗】

如果你要做的是系统级别的悬浮窗，就需要判断是否具备悬浮窗权限。然而这又不是一个标准的动态权限，你需要兼容各种奇葩机型的悬浮窗权限判断。

fun checkPermission(context: Context): Boolean =if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) when {RomUtils.checkIsHuaweiRom() -> huaweiPermissionCheck(context)RomUtils.checkIsMiuiRom() -> miuiPermissionCheck(context)RomUtils.checkIsOppoRom() -> oppoROMPermissionCheck(context)RomUtils.checkIsMeizuRom() -> meizuPermissionCheck(context)RomUtils.checkIs360Rom() -> qikuPermissionCheck(context)else -> true
} else commonROMPermissionCheck(context)private fun commonROMPermissionCheck(context: Context): Boolean =if (RomUtils.checkIsMeizuRom()) meizuPermissionCheck(context) else {var result = trueif (Build.VERSION.SDK_INT >= 23) try {val clazz = Settings::class.javaval canDrawOverlays = clazz.getDeclaredMethod("canDrawOverlays", Context::class.java)result = canDrawOverlays.invoke(null, context) as Boolean} catch (e: Exception) {Log.e(TAG, Log.getStackTraceString(e))}result}

如果你要做的是应用内的全局悬浮窗，那么对不起，不支持，自己想办法。普遍的做法是在根布局 DecorView 直接塞进去。

遥遥领先qr23.cn/AKFP8k获取

在鸿蒙上实现悬浮窗相对就要简单的多。

对于系统级别弹窗，仍然需要权限，但也不至于那么麻烦的适配。

对于应用内全局弹出，鸿蒙提供了 应用子窗口 可以直接实现。

本文主要介绍如何利用应用子窗口实现应用内全局悬浮窗。

创建应用子窗口需要先拿到窗口管理器 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.UIAbilityContextbuild() {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 + offSetXthis.locationY = this.locationY + offsetYthis.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()}
})

应用内全局，可拖拽的悬浮窗就完成了。