HarmonyOS 全局悬浮窗功能用什么组件实现？

Question

悬浮窗进行股票盯盘。

当前困难影响：阻塞；画中画功能无法满足场景要求，全局悬浮窗又只支持2in1设备，不知如何实现？

Answer 1

目前暂时不支持应用外的悬浮窗，悬浮窗只能在应用内创建。

应用内可参考如下demo:

//FloatWindow.ets
// 引入window类
import window from '@ohos.window';
import { BusinessError } from '@ohos.base';
import router from '@ohos.router';
@Entry
@Component
struct FloatWindow {
  // 定义windowClass变量，用来接收创建的悬浮窗
  // 自定义创建悬浮窗方法
  createFloatWindow() {
    // 窗口类型设置为window.WindowType.TYPE_FLOAT
    let windowStage = AppStorage.get("windowStage") as window.WindowStage;
    windowStage.createSubWindow("floatWindow", (err, win) => {
      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(win));
      win.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.');
      });
       win.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.');
      });
      win.setUIContent("pages/FloatContent", (err: BusinessError) => {
        if (err.code) {
          console.error('Failed to load the content. Cause:' + JSON.stringify(err));
          return;
        }
        win.setWindowBackgroundColor("#00000000")
        console.info('Succeeded in loading the content.');
        // 显示悬浮窗。
        win.showWindow((err: BusinessError) => {
          if (err.code) {
            console.error('Failed to show the window. Cause: ' + JSON.stringify(err));
            return;
          }
          console.info('Succeeded in showing the window.');
        });
      });
    });
  }
  // 自定义销毁悬浮窗方法
  destroyFloatWindow() {
    // 用windowClass调用destroyWindow销毁悬浮窗
    window.findWindow("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.');
    });
  }
  build() {
    Row() {
      Column() {
        TextInput()
        Button('创建悬浮窗')
          .backgroundColor('#F9C449')
          .onClick(() => {
            // 点击按钮调用创建悬浮窗方法
            this.createFloatWindow();
          })
        Button('销毁悬浮窗')
          .margin({ top: 20 })
          .backgroundColor('#F9C449')
          .onClick(() => {
            // 点击按钮调用销毁悬浮窗方法
            this.destroyFloatWindow();
          })
        Button('跳转下一页')
          .margin({ top: 20 })
          .backgroundColor('#F9C449')
          .onClick(() => {
          router.pushUrl({
            url: 'pages/Index'
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

//FloatContent.ets
import window from '@ohos.window';
interface Position {
  x: number,
  y: number
}
@Entry
@Component
struct FloatContent {
  @State message: string = 'float window'
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All });
  // 创建位置变量，并使用@Watch监听，变量发生变化调用moveWindow方法移动窗口
  @State @Watch("moveWindow") windowPosition: Position = { x: 0, y: 0 };
  floatWindow: window.Window = window.findWindow("floatWindow")
  // 通过悬浮窗名称“floatWindow”获取到创建的悬浮窗
  aboutToAppear() {
    this.floatWindow = window.findWindow("floatWindow")
    this.floatWindow.setPreferredOrientation(window.Orientation.LANDSCAPE)
  }
  // 将悬浮窗移动到指定位置
  moveWindow() {
    this.floatWindow.moveWindowTo(this.windowPosition.x, this.windowPosition.y);
  }
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(30)
          .fontColor(Color.White)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .borderRadius(500)
    .height('100%')
    .gesture(
      // 绑定PanGesture事件，监听拖拽动作
      PanGesture(this.panOption)
        .onActionStart((event: GestureEvent) => {
          console.info('Pan start');
        })
          // 发生拖拽时，获取到触摸点的位置，并将位置信息传递给windowPosition
        .onActionUpdate((event: GestureEvent) => {
          this.windowPosition.x += event.offsetX;
          this.windowPosition.y += event.offsetY;
        })
        .onActionEnd(() => {
          console.info('Pan end');
        })
    )
    .border({
      style: BorderStyle.Dotted
    })
    .backgroundColor("#E8A49C")
  }
}