前言

为了增加应用程序功能的丰富性和便利性，很多应用都会提供一个悬浮窗口实现多页面显示。特别是一些性能检测工具，比如 dokit 。在鸿蒙上怎么实现类似的全局悬浮窗口呢？阅读完本篇文章你将学会在鸿蒙上如何实现这一功能。

实现效果

需求分析

要想实现全局悬浮窗口，必须满足以下几个要求：

窗口可以悬浮在任意页面。

窗口可以跟随手势拖动。

边界处理。

技术实现

在 ArkUI 中，页面只有 Window 和 View 两种组成。View 通常都是显示在 Window 中，如果要想实现一个可以在任意页面都能停留显示的悬浮窗，只能通过 window 来实现。

通过 windowState 调用 createSubWIndow 来创建一个子 Window。

this.windowState.createSubWindow("subWindow", (err: BusinessError, window) => {

    })

对于 windowState 的获取，一般都在 EntryAbility 中的 onWindowStateCreate 中提供，如果不想通过传递参数的方式获取 windowStage，系统也提供了工具类可以在任意地方获取。

//存储windowStage

WindowManager.setWindowStage(windowStage);

//获取windowstage

this.windowState = WindowManager.getWindowStage()

初始化 Window。url 为 window 页面的路径。

    window.setWindowLayoutFullScreen(false) //设置window是否全屏显示

      window.setUIContent(url, (error) => {

        window.showWindow((error) => {

          window.setWindowBackgroundColor("#00000000") //设置window背景色

        })

      })

      window.resize(this.size, this.size)//设置window大小

      window.moveWindowTo(this.locationX, this.locationY) //设置window的初始位置

手势移动,通过调研 PanGesture()的 onActionUpdate 方法不断更新 window 的位置。

.gesture(GestureGroup(

      GestureMode.Exclusive,

      PanGesture().onActionUpdate((event)=>{

        this.currentWindow?.moveWindowTo(event.offsetX,event.offsetY)

      })

    ))

边界处理，计算最小移动范围和最大移动范围。确保 window 不会移出当前页面。

this.locationX = Math.min(Math.max(this.locationX + x, this.minX), this.maxX)

this.locationY = Math.min(Math.max(this.locationY + y, this.minY), this.maxY)

window 销毁。当退出应用时，需要将 window 关闭,调用 window 的 destroyWindow 方法销毁 window。

this.contentWindow.destroyWindow(() => {

        this.contentWindow = undefined

      })

总结

通过 window 不仅能实现全局悬浮窗，还可以实现自定义弹窗，Poupwindow,toast 等一系列弹窗。使用 window 的好处在于可以彻底和当前页面分离，不依赖页面存在。可以实现在任意地方弹窗。快动手试试吧！