HarmonyOS 如何实现应用内全局悬浮图标设置并且可拖动？

import BuildProfile from 'BuildProfile';  
...  
@State mode:string = BuildProfile.BUILD_MODE_NAME

import { window } from '@kit.ArkUI';  
  
@Entry  
@Component  
struct Page3 {  
  @State message: string = 'Hello World';  
  
  build() {  
    Row() {  
      Column() {  
        Text(this.message)  
          .fontSize(50)  
          .fontWeight(FontWeight.Bold)  
          .onClick(() => {  
  
            let windowStage = AppStorage.get("windowStage") as window.WindowStage;  
            windowStage.createSubWindow("test", (err, win) => {  
              win.setUIContent("pages/Page2");  
              win.resize(500, 500);  
              win.moveWindowTo(200, 200);  
              win.showWindow();  
            })  
          })  
      }  
      .width('100%')  
    }  
    .height('100%')  
    .backgroundColor(Color.Pink)  
  }  
}  
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;  
    // let config:window.Configuration = {name: "floatWindow", windowType: window.WindowType.TYPE_FLOAT, ctx: getContext(this)};  
    // 创建悬浮窗  
    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.');  
      });  
      // 为悬浮窗加载页面内容，这里可以设置在main_pages.json中配置的页面  
      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")  
  }  
}