如何实现 app 内置全局悬浮球功能？

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) 
  } 
} 
//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") 
  } 
} 
//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; 
 
    // 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%') 
  } 
}