前言

為了增加應用程序功能的豐富性和便利性，很多應用都會提供一個懸浮窗口實現多頁面顯示。特別是一些性能檢測工具，比如 dokit 。在鴻蒙上怎么實現類似的全局懸浮窗口呢？閱讀完本篇文章你將學會在鴻蒙上如何實現這一功能。

實現效果

需求分析

要想實現全局懸浮窗口，必須滿足以下幾個要求：

1. 窗口可以懸浮在任意頁面。
2. 窗口可以跟隨手勢拖動。
3. 邊界處理。

技術實現

在 ArkUI 中，頁面只有 Window 和 View 兩種組成。View 通常都是顯示在 Window 中，如果要想實現一個可以在任意頁面都能停留顯示的懸浮窗，只能通過 window 來實現。

1. 通過 windowState 調用 createSubWIndow 來創(chuàng)建一個子 Window。

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

    })

2. 對于 windowState 的獲取，一般都在 EntryAbility 中的 onWindowStateCreate 中提供，如果不想通過傳遞參數的方式獲取 windowStage，系統也提供了工具類可以在任意地方獲取。

//存儲windowStage
WindowManager.setWindowStage(windowStage);
//獲取windowstage
 this.windowState = WindowManager.getWindowStage()

3. 初始化 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的初始位置

4. 手勢移動,通過調研 PanGesture()的 onActionUpdate 方法不斷更新 window 的位置。

.gesture(GestureGroup(
      GestureMode.Exclusive,
      PanGesture().onActionUpdate((event)= >{
        this.currentWindow?.moveWindowTo(event.offsetX,event.offsetY)
      })
    ))

5. 邊界處理，計算最小移動范圍和最大移動范圍。確保 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)

6. window 銷毀。當退出應用時，需要將 window 關閉,調用 window 的 destroyWindow 方法銷毀 window。

this.contentWindow.destroyWindow(() = > {
        this.contentWindow = undefined
      })

總結

通過 window 不僅能實現全局懸浮窗，還可以實現自定義彈窗，Poupwindow,toast 等一系列彈窗。使用 window 的好處在于可以徹底和當前頁面分離，不依賴頁面存在。可以實現在任意地方彈窗。快動手試試吧！