背景

懸浮視圖或者窗體，在Android和iOS兩大移動平臺均有使用，HarmonyOS 也實現(xiàn)了此功能，如下為大家分享一下效果

準備

1. 熟讀HarmonyOS 懸浮窗口指導
2. 熟讀HarmonyOS 手勢指導
3. 熟讀ALC簽名指導，用于可以申請 “ohos.permission.SYSTEM_FLOAT_WINDOW” 權限。
4. 熟悉的文檔在下方
   |

實踐代碼

1. 如果開啟了懸浮窗口，任何界面的物理返回鍵事件都會被懸浮窗口攔截掉，即 手勢返回廢了
2. 參數(shù)類型易混淆, 拖動 PanGesture 中的onActionUpdate接口，數(shù)據(jù)單位為 vp ，window中的 moveWindowTo接口參數(shù)，數(shù)據(jù)單位為px
3. 采用moveWindowTo實現(xiàn)的窗口拖動效果十分不平滑
4. 通過 requestPermissionsFromUser 申請 ohos.permission.SYSTEM_FLOAT_WINDOW 權限時，無法彈出系統(tǒng)權限提示框

片段代碼

配置module.json5

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "abilities": [
......
      {
        "name": "FloatWindowAbility",
        "srcEntry": "./ets/myentryability/FloatWindowAbility.ts",
        "description": "$string:FloatWindowAbility_desc",
        "icon": "$media:icon",
        "label": "$string:FloatWindowAbility_label",
        "startWindowIcon": "$media:icon",
        "startWindowBackground": "$color:start_window_background",
      },
    ],
    "requestPermissions": [
       {
        "name": "ohos.permission.SYSTEM_FLOAT_WINDOW",
        "usedScene": {
          "abilities": [
            "FloatWindowAbility"
          ],
          "when": "always"
        }
      }
    ]
  }
}

懸浮窗口UIAbility

import window from '@ohos.window';
import BaseUIAbility from '../baseuiability/BaseUIAbility';
import abilityAccessCtrl, { Permissions } from '@ohos.abilityAccessCtrl';
import bundleManager from '@ohos.bundle.bundleManager';

const permissions: Array< Permissions > = ['ohos.permission.SYSTEM_FLOAT_WINDOW'];

export default class FloatWindowAbility extends BaseUIAbility {

  onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
    let context = this.context;
    let atManager = abilityAccessCtrl.createAtManager();

    checkPermissions().then((result)= >{
      if(result){
        // requestPermissionsFromUser會判斷權限的授權狀態(tài)來決定是否喚起彈窗
        atManager.requestPermissionsFromUser(context, permissions).then((data) = > {
          let grantStatus: Array< number > = data.authResults;
          let length: number = grantStatus.length;

          for (let i = 0; i < length; i++) {
            if (grantStatus[i] === 0) {
              // 用戶授權，可以繼續(xù)訪問目標操作
              console.log('用戶授權，可以繼續(xù)訪問目標操作')
            } else {
              // 用戶拒絕授權，提示用戶必須授權才能訪問當前頁面的功能，并引導用戶到系統(tǒng)設置中打開相應的權限
              console.log('用戶拒絕授權，提示用戶必須授權才能訪問當前頁面的功能，并引導用戶到系統(tǒng)設置中打開相應的權限')
              return;
            }
          }

          // 授權成功
          // 1.創(chuàng)建懸浮窗。
          let windowClass = null;
          let config = {name: "floatWindow", windowType: window.WindowType.TYPE_FLOAT, ctx: this.context};
          window.createWindow(config, (err, data) = > {
            if (err.code) {
              console.error('Failed to create the floatWindow. Cause: ' + JSON.stringify(err));
              return;
            }
            console.info('Succeeded in creating the floatWindow. Data: ' + JSON.stringify(data));
            windowClass = data;

            // 2.懸浮窗窗口創(chuàng)建成功后，設置懸浮窗的位置、大小及相關屬性等。
            windowClass.moveWindowTo(0, 200, (err) = > {
              if (err.code) {
                console.error('Failed to move the window. Cause:' + JSON.stringify(err));
                return;
              }
              console.info('Succeeded in moving the window.');
            });
            windowClass.resize(1080, 151, (err) = > {
              if (err.code) {
                console.error('Failed to change the window size. Cause:' + JSON.stringify(err));
                return;
              }
              console.info('Succeeded in changing the window size.');

            });

            // 3.為懸浮窗加載對應的目標頁面。
            windowClass.setUIContent("custompages/FloatPage", (err) = > {
              if (err.code) {
                console.error('Failed to load the content. Cause:' + JSON.stringify(err));
                return;
              }
              console.info('Succeeded in loading the content.');
              // 3.顯示懸浮窗。
              windowClass.showWindow((err) = > {
                if (err.code) {
                  console.error('Failed to show the window. Cause: ' + JSON.stringify(err));
                  return;
                }
                console.info('Succeeded in showing the window.');
              });

              try {
                windowClass.setWindowBackgroundColor('#00000000')
              } catch (exception) {
                console.error('Failed to set the background color. Cause: ' + JSON.stringify(exception));
              }

            });

          })

        }).catch((err) = > {
          console.error(`requestPermissionsFromUser failed, code is ${err.code}, message is ${err.message}`);
        })

      }
    })

  }

}

async function checkAccessToken(permission: Permissions): Promise< abilityAccessCtrl.GrantStatus > {
  let atManager = abilityAccessCtrl.createAtManager();
  let grantStatus: abilityAccessCtrl.GrantStatus;

  // 獲取應用程序的accessTokenID
  let tokenId: number;
  try {
    let bundleInfo: bundleManager.BundleInfo = await bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION);
    let appInfo: bundleManager.ApplicationInfo = bundleInfo.appInfo;
    tokenId = appInfo.accessTokenId;
  } catch (err) {
    console.error(`getBundleInfoForSelf failed, code is ${err.code}, message is ${err.message}`);
  }

  // 校驗應用是否被授予權限
  try {
    grantStatus = await atManager.checkAccessToken(tokenId, permission);
  } catch (err) {
    console.error(`checkAccessToken failed, code is ${err.code}, message is ${err.message}`);
  }

  return grantStatus;
}

async function checkPermissions(): Promise< boolean > {
  const permissions: Array< Permissions > = ['ohos.permission.SYSTEM_FLOAT_WINDOW'];
  let grantStatus: abilityAccessCtrl.GrantStatus = await checkAccessToken(permissions[0]);

  if (grantStatus === abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED) {
    // 已經(jīng)授權，可以繼續(xù)訪問目標操作
    console.log('沒有授權')
    return true
  } else {
    // 申請日歷權限
    console.log('已授權')
    return false
  }
}

懸浮窗口頁面

import common from '@ohos.app.ability.common';
import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State lasttime: number = 0

  @State message: string = '懸浮窗'
  @State foldStatus: boolean = false
  @State idleName: string = '收起'
  @State floatWindowWidth: number = 0
  @State offsetX: number = 0
  @State offsetY: number = 0
  @State positionX: number = 0
  @State positionY: number = 0
  @State windowPosition: Position = { x: 0, y: 0 };

  private context = getContext(this) as common.UIAbilityContext;
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All });

  floatWindow: window.Window

  aboutToAppear(){
    this.eventHubFunc()
    this.floatWindow = window.findWindow("floatWindow")
    this.floatWindowWidth = 1080
    this.panOption.setDistance(1)
  }

  onBackPress(){
    console.log('返回')
  }

  build() {
    Row() {

         Text('X').width(px2vp(140))
           .textAlign(TextAlign.Center)
           .fontColor(Color.Red).onClick(()= >{
           //關閉所依賴的UIAbility
           this.context.terminateSelf()
           //銷毀懸浮窗。當不再需要懸浮窗時，可根據(jù)具體實現(xiàn)邏輯，使用destroy對其進行銷毀。
           this.floatWindow.destroyWindow((err) = > {
             if (err.code) {
               console.error('Failed to destroy the window. Cause: ' + JSON.stringify(err));
               return;
             }
             console.info('Succeeded in destroying the window.');
           });
         })

         Text(this.idleName)
           .width(px2vp(140))
           .height('100%')
           .fontSize(18)
           .fontColor(Color.White)
           .textAlign(TextAlign.Center)
           .backgroundColor(Color.Gray)
           .onClick(()= >{
             this.foldStatus = !this.foldStatus

             if(this.foldStatus){
               this.idleName = "展開"
               this.floatWindowWidth = 280
             } else {
               this.idleName = "收起"
               this.floatWindowWidth = 1080
             }
           })

         Divider().vertical(true).color(Color.Red)

         if(!this.foldStatus) {
           Text(this.message)
             .width(px2vp(800))
             .fontSize(18)
             .fontColor(Color.White)
             .padding('12vp')
         }

    }
    .width(px2vp(this.floatWindowWidth))
    .height(px2vp(150))
    .borderRadius('12vp')
    .backgroundColor(Color.Green)
    .gesture(
      // 綁定PanGesture事件，監(jiān)聽拖拽動作
      PanGesture(this.panOption)
        .onActionStart((event: GestureEvent) = > {
          console.info('Pan start');
        })
          // 發(fā)生拖拽時，獲取到觸摸點的位置，并將位置信息傳遞給windowPosition
        .onActionUpdate((event: GestureEvent) = > {

          console.log(event.offsetX +' ' + event.offsetY)

          this.offsetX = this.positionX + event.offsetX
          this.offsetY = this.positionY + event.offsetY

          this.floatWindow.moveWindowTo(vp2px(this.offsetX), vp2px(this.offsetY));

        })
        .onActionEnd(() = > {
          this.positionX = this.offsetX
          this.positionY = this.offsetY
          console.info('Pan end');
        })
    )

  }

  eventHubFunc() {
    this.context.eventHub.on('info', (data) = > {
        this.message = data
    });
  }

}

審核編輯 黃宇