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

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

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")  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.