HarmonyOS 如何支持全局的悬浮窗

目前的需求如下:

1、App点击某个按钮,启动一个全局的悬浮窗,上面的View是我们自定义的;悬浮窗浮动在所有app的上面,且需要可以手势移动位置、大小

2、悬浮窗内部需要录音,能获取当时的PCM音频数据

HarmonyOS
18h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

可以参考下面文档

在应用程序中使用画中画功能:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/window-pipwindow-V5

设置悬浮窗功能:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-window-stage-V5

创建WindowType.TYPE_FLOAT即悬浮窗类型的窗口,需要申请ohos.permission.SYSTEM_FLOAT_WINDOW权限,该权限为受控开放权限,仅2in1设备可申请该权限。

子窗口可参考此demo:

EntryAbility .ets

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

let windowStage_: window.WindowStage | null = null;
let sub_windowClass: window.Window | null = null;
export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }
  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }
  showSubWindow() {
    // 1.创建应用子窗口。
    if (windowStage_ == null) {
      console.error('Failed to create the subwindow. Cause: windowStage_ is null');
    }
    else {
      windowStage_.createSubWindow("mySubWindow", (err: BusinessError, data) => {
        let errCode: number = err.code;
        if (errCode) {
          console.error('Failed to create the subwindow. Cause: ' + JSON.stringify(err));
          return;
        }
        sub_windowClass = data;
        console.info('Succeeded in creating the subwindow. Data: ' + JSON.stringify(data));
        // 2.子窗口创建成功后,设置子窗口的位置、大小及相关属性等。
        sub_windowClass.moveWindowTo(300, 300, (err: BusinessError) => {
          let errCode: number = err.code;
          if (errCode) {
            console.error('Failed to move the window. Cause:' + JSON.stringify(err));
            return;
          }
          console.info('Succeeded in moving the window.');
        });
        sub_windowClass.resize(500, 500, (err: BusinessError) => {
          let errCode: number = err.code;
          if (errCode) {
            console.error('Failed to change the window size. Cause:' + JSON.stringify(err));
            return;
          }
          console.info('Succeeded in changing the window size.');
        });
        // 3.为子窗口加载对应的目标页面。
        sub_windowClass.setUIContent("pages/subPage", (err: BusinessError) => {
          let errCode: number = err.code;
          if (errCode) {
            console.error('Failed to load the content. Cause:' + JSON.stringify(err));
            return;
          }
          console.info('Succeeded in loading the content.');
          // 3.显示子窗口。
          (sub_windowClass as window.Window).showWindow((err: BusinessError) => {
            let errCode: number = err.code;
            if (errCode) {
              console.error('Failed to show the window. Cause: ' + JSON.stringify(err));
              return;
            }
            console.info('Succeeded in showing the window.');
          });
        });
      })
    }
  }
  destroySubWindow() {
    // 4.销毁子窗口。当不再需要子窗口时,可根据具体实现逻辑,使用destroy对其进行销毁。
    (sub_windowClass as window.Window).destroyWindow((err: BusinessError) => {
      let errCode: number = err.code;
      if (errCode) {
        console.error('Failed to destroy the window. Cause: ' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in destroying the window.');
    });
  }
  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      AppStorage.setOrCreate("windowStage", windowStage);
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });

  }
  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }
  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }
  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

Index.ets

import { window } from '@kit.ArkUI';
@Entry
@Component
struct Index {
  @State message: string = '创建子窗口';
  @State windowStage: window.WindowStage = AppStorage.get("windowStage") as window.WindowStage
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.windowStage.createSubWindow("mySubWindow", (err, windowClass) => {
              if (err.code > 0) {
                console.error("failed to create subWindow Cause:" + err.message)
                return;
              }
              // 设置子窗口加载页
              try {
                windowClass.setUIContent("pages/subPage", () => {
                  windowClass.setWindowBackgroundColor("#00000000")
                });
                // 设置子窗口左上角坐标
                windowClass.moveWindowTo(0, 200)
                // 设置子窗口大小
                windowClass.resize(vp2px(300), vp2px(300))
                // 展示子窗口
                windowClass.showWindow();
                // 设置子窗口全屏化布局不避让安全区
                windowClass.setWindowLayoutFullScreen(true);
              } catch (err) {
                console.error("failed to create subWindow Cause:" + err)
              }
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

SubPage.ets

import { router, window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct SubPage {
  @State message: string = 'SUBPAGE';
  @State windowStage: window.WindowStage = AppStorage.get("windowStage") as window.WindowStage;
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Button("跳转")
          .onClick(() => {
            // 获取子窗口ID
            let subWindowID: number = window.findWindow("mySubWindow").getWindowProperties().id
            // 获取主窗口ID
            let mainWindowID: number = this.windowStage.getMainWindowSync().getWindowProperties().id
            // 将焦点从子窗口转移到主窗口
            let promise = window.shiftAppWindowFocus(subWindowID, mainWindowID);
            promise.then(() => {
              console.info('Succeeded in shifting app window focus');
            }).catch((err: BusinessError) => {
              console.error('Failed to shift app window focus. Cause: ' + JSON.stringify(err));
            })
            this.windowStage.getMainWindowSync().getUIContext().getRouter().pushUrl({ url: "pages/routerPage" }, router.RouterMode.Single);
          })
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor(Color.Red)
  }
}

RouterPage.ets

@Entry
@Component
struct RouterPage {
  @State message: string = 'RouterPage';
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor(Color.Pink)
  }
}

此demo功能是index页面点击创建子窗口subPage页面,在subPage页面点击跳转到routerPage页面

分享
微博
QQ
微信
回复
15h前
相关问题
HarmonyOS 是否支持悬浮能力
36浏览 • 1回复 待解决
HarmonyOS 悬浮圆角怎么处理?
85浏览 • 1回复 待解决
HarmonyOS 如何跨模块启动悬浮
18浏览 • 1回复 待解决
如何实现悬浮桌面穿透
838浏览 • 1回复 待解决
如何实现全局效果
1737浏览 • 1回复 待解决
横屏应用如何适配华为悬浮?
2667浏览 • 1回复 待解决
HarmonyOS 悬浮拖拽功能怎么处理?
351浏览 • 1回复 待解决
HarmonyOS有没有悬浮组件或者库
437浏览 • 1回复 待解决