前言

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

實(shí)現(xiàn)效果

需求分析

要想實(shí)現(xiàn)全局懸浮窗口，必須滿足以下幾個(gè)要求：

1. 窗口可以懸浮在任意頁面。
2. 窗口可以跟隨手勢(shì)拖動(dòng)。
3. 邊界處理。

技術(shù)實(shí)現(xiàn)

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

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

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

    })

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

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

3. 初始化 Window。url 為 window 頁面的路徑。

window.setWindowLayoutFullScreen(false) //設(shè)置window是否全屏顯示
      window.setUIContent(url, (error) = > {
        window.showWindow((error) = > {
          window.setWindowBackgroundColor("#00000000") //設(shè)置window背景色
        })

      })

      window.resize(this.size, this.size)//設(shè)置window大小
      window.moveWindowTo(this.locationX, this.locationY) //設(shè)置window的初始位置

4. 手勢(shì)移動(dòng),通過調(diào)研 PanGesture()的 onActionUpdate 方法不斷更新 window 的位置。

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

5. 邊界處理，計(jì)算最小移動(dòng)范圍和最大移動(dòng)范圍。確保 window 不會(huì)移出當(dāng)前頁面。

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 銷毀。當(dāng)退出應(yīng)用時(shí)，需要將 window 關(guān)閉,調(diào)用 window 的 destroyWindow 方法銷毀 window。

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

總結(jié)

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