从此
📄文章 #️⃣专题 🌐酷站 👨‍💻技术 📺 📱

🏠 » 📄文章 » 内容

 欢迎来访!

全局悬浮窗 createSubWindow 鸿蒙系统 HarmonyOS NEXT ArkTS 编程开发

🕗2025-05-30👁️0

全局悬浮窗,鸿蒙系统有着专属的创建方法,就是使用createSubWindow创建子窗口,这个子窗口会悬浮在整个应用上方。具体实现代码如下:

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

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

//尺寸data.resize(300,300,(err: BusinessError) =>})
//位置data.moveWindowTo(400,400,(err: BusinessError) =>})
//展示data.showWindow((err: BusinessError) =>});

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

data?.setWindowBackgroundColor('#00000000');

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

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

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

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()
  }
}