HarmonyOS 如何实现一个悬浮球/悬浮窗,悬浮在所有页面之上?

HarmonyOS  如何实现一个悬浮球/悬浮窗,悬浮在所有页面之上?

HarmonyOS
2024-09-25 12:51:19
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

按照描述,可以使用子窗口实现应用内悬浮窗,通过子窗口创建windowStage.createSubWindow(‘mySubWindow’)

步骤如下:

1、在EntryAbility中获取WindowStage。

onWindowStageCreate(windowStage: window.WindowStage): void {  
  // Main window is created, set main page for this ability  
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');  
  
  windowStage.loadContent('pages/Page', (err, data) => {  
  if (err.code) {  
  hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');  
  return;  
}  
// 保存窗口管理器  
AppStorage.setOrCreate("windowStage", windowStage);  
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');  
});  
}

2、创建子窗口,子窗口样式由子窗口加载的页面组件样式决定。

this.windowStage.createSubWindow("mySubWindow", (err, windowClass) => {  
  if (err.code > 0) {  
    console.error("failed to create subWindow Cause:" + err.message)  
    return;  
  }  
  try {  
    // 设置子窗口加载页  
    windowClass.setUIContent("pages/MySubWindow", () => {  
      windowClass.setWindowBackgroundColor("#00000000")  
    });  
    // 设置子窗口左上角坐标  
    windowClass.moveWindowTo(0, 200)  
    // 设置子窗口大小  
    windowClass.resize(vp2px(75), vp2px(75))  
    // 展示子窗口  
    windowClass.showWindow();  
    // 设置子窗口全屏化布局不避让安全区  
    windowClass.setWindowLayoutFullScreen(true);  
  } catch (err) {  
    console.error("failed to create subWindow Cause:" + err)  
  }  
})

同时也支持子窗口响应正常点击事件,可通过添加PanGesture触发拖动使悬浮窗的移动,根据最后手势停留位置,做动画靠屏幕左或靠右显示等

相关代码:

.gesture(  
  // 声明该组合手势的类型为Sequence类型  
  PanGesture(this.panOption)  
    .onActionStart((event: GestureEvent) => {  
      console.info('Pan start');  
    })// 发生拖拽时,获取到触摸点的位置,并将位置信息传递给windowPosition  
    .onActionUpdate((event: GestureEvent) => {  
      this.windowPosition.x += event.offsetX;  
      this.windowPosition.y += event.offsetY;  
  
      this.subWindow.moveWindowTo(this.windowPosition.x, this.windowPosition.y)  
    })  
    .onActionEnd((event: GestureEvent) => {  
      // 贴边判断  
      if (event.offsetX > 0) {  
        this.windowPosition.x = display.getDefaultDisplaySync().width - this.subWindow.getWindowProperties()  
          .windowRect  
          .width;  
      } else if (event.offsetX < 0) {  
        this.windowPosition.x = 0;  
      }  
      this.subWindow.moveWindowTo(this.windowPosition.x, this.windowPosition.y)  
      console.info('Pan end');  
    })  
)

如果是有视频类内容需要画中画能力,也主动调用画中画完成后台播放,以及返回桌面时自动启动画中画,链接和步骤如下:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-pipwindow-0000001861966393-V5

1.通过pipController.startPiP()完成主动调用画中画功能。

2.通过pipController.setAutoStartEnabled(true)在返回桌面时完成全局画中画播放。

分享
微博
QQ
微信
回复
2024-09-25 16:58:55
相关问题
如何实现 app 内置全局悬浮功能?
1955浏览 • 1回复 待解决
如何实现悬浮桌面穿透
824浏览 • 1回复 待解决
悬浮能调用锁屏功能吗?
556浏览 • 1回复 待解决
HarmonyOS 悬浮的圆角怎么处理?
65浏览 • 1回复 待解决
在hsp子模块中如何加载悬浮页面
1939浏览 • 1回复 待解决
HarmonyOS有没有悬浮组件或者库
424浏览 • 1回复 待解决
HarmonyOS 悬浮拖拽功能怎么处理?
335浏览 • 1回复 待解决
基于子窗口实现应用内悬浮
769浏览 • 1回复 待解决
横屏应用如何适配华为悬浮?
2646浏览 • 1回复 待解决
使用悬浮和端内want唤醒APP
926浏览 • 1回复 待解决
HarmonyOS 悬浮的文档在哪儿呢?
254浏览 • 1回复 待解决