HarmonyOS 鸿蒙Next 如何实现类似微信音视频通话悬浮窗

可以通过window.createWindow来展示悬浮窗

1.目前悬浮窗不支持根据用户拖动来改变位置，但是可以通过在悬浮窗设置拖拽控件，监听拖拽方法来改变窗口的位置。

2.子窗口不支持悬浮，会随主窗口进入后台而进入后台，子窗口只能在windowStage中创建。

说明：首先需要通过应用市场（AGC）申请ACL权限“ohos.permission.SYSTEM_FLOAT_WINDOW”

并在在配置文件中添加权限说明，从而允许应用使用悬浮窗的能力。

// 共两个Ets文件：Index.ets、Page.ets

// Index.ets
import window from '@ohos.window'
import common from '@ohos.app.ability.common'
@Entry
@Component
struct Index {
  context = getContext(this) as common.UIAbilityContext
  build() {
    Row() {
      Column() {
        Button("创建悬浮窗")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.createWindow()
          })
      }.width('100%')
    }.height('100%')
  }
  createWindow() {
    let windowClass;
    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;
      // 3.悬浮窗窗口创建成功后，设置悬浮窗的位置、大小及相关属性等。
      windowClass.moveWindowTo(300, 300, (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(500, 500, (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.');
      });
      // 4.为悬浮窗加载对应的目标页面。
      windowClass.setUIContent("pages/Page", (err) => {
        if (err.code) {
          console.error('Failed to load the content. Cause:' + JSON.stringify(err));
          return;
        }
        console.info('Succeeded in loading the content.');
        // 4.显示悬浮窗。
        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.')
        })
      })
    })
  }
}

// Page.ets 在悬浮窗中的控件监听拖拽事件，在aboutToAppear通过窗口名获取到窗口，然后根据控件的拖拽事件，改变窗口位置
import window from '@ohos.window'
interface Position {
  x: number,
  y: number
}

@Entry
@Component
struct Page {
  @State message: string = 'Hello World'
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All });
  @State @Watch("moveWindow") windowPosition: Position = { x: 0, y: 0 };
  floatWindow: window.Window

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .backgroundColor(Color.Green)
          .width("100%")
          .height('100%')
          .gesture(
            PanGesture(this.panOption)
              .onActionStart((event: GestureEvent) => {
                console.info('Pan start');
              })
              .onActionUpdate((event: GestureEvent) => {
                this.windowPosition.x += event.offsetX;
                this.windowPosition.y += event.offsetY;
              })
              .onActionEnd(() => {
                console.info('Pan end');
              })
          )
      }
      .width('100%')
    }
    .height('100%')
  }

  moveWindow() {
    this.floatWindow.moveWindowTo(this.windowPosition.x, this.windowPosition.y);
  }

  aboutToAppear() {
    this.floatWindow = window.findWindow("floatWindow")
  }
}

// 还需注意 注册相关页面 src/main/resources/base/profile/main_pages.json
{
  "src": [
  "pages/Index",
  "pages/Page"
  ]
}