HarmonyOS NEXT开发教程：全局悬浮窗原创

幽蓝计划

发布于 2025-4-9 11:04

浏览

0收藏

今天跟大家分享一下HarmonyOS开发中的悬浮窗。
HarmonyOS NEXT开发教程：全局悬浮窗-鸿蒙开发者社区
对于悬浮窗，可能有的同学会想到使用层叠布局是否可以实现，将悬浮窗叠在导航栏组件Tabs上，像这样：

Stack({alignContent:Alignment.BottomEnd}){
  Tabs({barPosition:BarPosition.End}){
    TabContent(){
      Text('page1')
        .fontColor(Color.Black)
        .fontSize(40)
    }
    .tabBar(this.Tabbar())
    TabContent(){
      Page2()
    }
    .tabBar(this.Tabbar())
   
  }

  Row(){
	//这是悬浮窗
  }
  .width(60)
  .height(60)
  .borderRadius(30)
  .backgroundColor(Color.Blue)
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

这样的布局在push到下一个页面时悬浮窗就会消失，所以是行不通的。
对于悬浮窗鸿蒙系统有专属的创建方法，就是使用createSubWindow创建子窗口，这个子窗口会悬浮在整个应用上方。具体实现代码如下：

windowStage.createSubWindow('floatWindow',(err: BusinessError, data) => {
})

1.
2.
3.

在创建完成后，可以设置悬浮窗的尺寸、位置和内容等属性,要注意这里的单位是px，且只能传正整数类型：

//尺寸
data.resize(300,300,(err: BusinessError) => {
})
1.
2.
3.

//位置
data.moveWindowTo(400,400,(err: BusinessError) => {
})
1.
2.
3.

//内容
data.setUIContent("pages/FloatWindow", (err: BusinessError) => {
})
1.
2.
3.

//展示
data.showWindow((err: BusinessError) => {
});
1.
2.
3.

有的时候你可能需要设置悬浮窗是圆形，办法是先去对应的内容页面设置圆角后发现还是会有白色的背景，然后把窗口背景色设置为透明，这个方法最好在setUIContent的回调中设置：

data?.setWindowBackgroundColor('#00000000');

1.
2.

当需要关闭悬浮窗时，可以调用destroyWindow方法进行销毁：

window.findWindow(FloatUntil.windowName).destroyWindow()

1.
2.

以上就是悬浮窗的常见使用方法，为了便于使用，我把以上方法进行了简单的封装，可以一行代码就实现悬浮窗的展示、移动、关闭等操作：

import EntryAbility from "../entryability/EntryAbility";
import { BusinessError } from "@kit.BasicServicesKit";
import { display, window } from "@kit.ArkUI";

export class FloatUntil{

  static  screen_width = display.getDefaultDisplaySync().width
  static screen_height = display.getDefaultDisplaySync().height
  static float_size = 420
  static  float_positon_x = FloatUntil.screen_width - FloatUntil.float_size - 40
  static  float_positon_y = FloatUntil.screen_height - FloatUntil.float_size - 440
  static  windowName = 'floatWindow'

 static  creatAndShowSubWindow(){
    EntryAbility.gloabalWindowStage.createSubWindow(FloatUntil.windowName, (err: BusinessError, data) => {
      let errCode: number = err.code;
      if (errCode) {
        return;
      }
      //位置、尺寸单位是px，只支持正整数
      data.moveWindowTo(FloatUntil.float_positon_x, FloatUntil.float_positon_y, (err: BusinessError) => {
        let errCode: number = err.code;
        if (errCode) {
          return;
        }
        console.info('Succeeded in moving the window.');
      });

      data.resize(FloatUntil.float_size, FloatUntil.float_size, (err: BusinessError) => {
        let errCode: number = err.code;
        if (errCode) {
          return;
        }
      });
      //悬浮窗是否可触
      data.setWindowTouchable(true);

      data.setUIContent("pages/FloatWindow", (err: BusinessError) => {
        let errCode: number = err.code;
        if (errCode) {
          console.error('Failed to load the content. Cause:' + JSON.stringify(err));
          return;
        }
        console.info('Succeeded in loading the content.');

        //设置窗口背景色透明，只有在这调用才不会报错
        data?.setWindowBackgroundColor('#00000000');

        data.showWindow((err: BusinessError) => {
          let errCode: number = err.code;

          if (errCode) {
            console.error('Failed to show the window. Cause: ' + JSON.stringify(err));
            return;
          }
          console.info('Succeeded in showing the window.');
        });
      });
    })
  }

  static moveWindowTo(x:number,y:number){
    window.findWindow(FloatUntil.windowName).moveWindowTo(x,y)
  }
  static destroyFloatWindow(){
     window.findWindow(FloatUntil.windowName).destroyWindow()
  }

}
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.