HarmonyOS 是否具有悬浮窗口/二级菜单悬浮窗口的组件和样例代码?

是否具有悬浮窗口/二级菜单悬浮窗口的组件和样例代码?希望通过悬浮窗口实现点击后弹出二级悬浮窗口,实现不同功能的测试采集。

HarmonyOS
2024-10-23 12:31:58
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

根据您的描述,实现方案如下,供您参考:

1、首先需要在EntryAbility.ets中将windowStage保存起来,在onWindowStageCreate方法中,添加如下代码:

AppStorage.setOrCreate("windowStage", windowStage);

2、新建一个页面Index.ets,在页面中点击创建子窗口按钮,出现子窗口页面,做成悬浮窗的样式

3、点击第一个子窗口(悬浮窗),根据需要创建多个其他的子窗口(做成悬浮窗的样式)

具体demo如下:

// 1、Index.ets页面

import { window } from '@kit.ArkUI'  
import { createSubWindow, SubWindow } from './utils'  
  
@Entry  
@Component  
struct IndexPage {  
  @State windowStage: window.WindowStage = AppStorage.get("windowStage") as window.WindowStage  
  
  build() {  
    Row() {  
      Column() {  
        Button("创建子窗口", { stateEffect: true, type: ButtonType.Capsule })  
          .width('80%')  
          .height(40)  
          .margin(20)  
          .onClick(() => {  
            let data: SubWindow = new SubWindow('subWinOne', 'pages/SubWindow/SubWinOne', 0, 640, vp2px(70), vp2px(70))  
            createSubWindow(this.windowStage, data)  
          })  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}

// 2、SubWinOne.ets 第一个子窗口

import { window } from '@kit.ArkUI';  
import { createSubWindow, SubWindow } from './utils';  
  
@Entry  
@Component  
struct SubWinOne {  
  @State windowStage: window.WindowStage = AppStorage.get("windowStage") as window.WindowStage;  
  @State subWindowList: SubWindow[] = [  
    new SubWindow('subWinTwo', 'pages/SubWindow/SubWinTwo', 100, 400, vp2px(50), vp2px(50)),  
    new SubWindow('subWinThree', 'pages/SubWindow/SubWinThree', 280, 660, vp2px(50), vp2px(50)),  
    new SubWindow('subWinFour', 'pages/SubWindow/SubWinFour', 100, 930, vp2px(50), vp2px(50))  
  ]  
  
  onPageShow(): void {  
    setTimeout(() => {  
      // 获取子窗口ID  
      let subWindowID: number = window.findWindow("subWinOne").getWindowProperties().id  
      // 获取主窗口ID  
      let mainWindowID: number = this.windowStage.getMainWindowSync().getWindowProperties().id  
      // 将焦点从子窗口转移到主窗口  
      window.shiftAppWindowFocus(subWindowID, mainWindowID)  
    }, 500)  
  }  
  
  build() {  
    Row() {  
      Column() {  
        Text('鹰巢').fontColor(Color.White)  
          .onClick(() => {  
            for (let i = 0; i < this.subWindowList.length; i++) {  
              createSubWindow(this.windowStage, this.subWindowList[i])  
            }  
          })  
      }  
      .width('100%')  
    }  
    .height('100%')  
    .backgroundColor(Color.Orange)  
    .borderRadius(40)  
  }  
}

// 3、SubWinTwo.ets 第二个子窗口```language

(SubWinThree、SubWinFour是一样的,就不贴上来了)  
import { window } from '@kit.ArkUI';  
  
@Entry  
@Component  
struct SubWinTwo {  
  @State windowStage: window.WindowStage = AppStorage.get("windowStage") as window.WindowStage;  
  
  onPageShow(): void {  
    setTimeout(() => {  
      // 获取子窗口ID  
      let subWindowID: number = window.findWindow("subWinTwo").getWindowProperties().id  
      // 获取主窗口ID  
      let mainWindowID: number = this.windowStage.getMainWindowSync().getWindowProperties().id  
      // 将焦点从子窗口转移到主窗口  
      window.shiftAppWindowFocus(subWindowID, mainWindowID)  
    }, 500)  
  }  
  
  build() {  
    Row() {  
      Column() {  
        Text('录像').fontColor(Color.White)  
      }  
      .width('100%')  
    }  
    .height('100%')  
    .backgroundColor(Color.Orange)  
    .borderRadius(40)  
  }  
}

// 4、utils.ets (公共方法和类)

import { window } from '@kit.ArkUI';  
  
export class SubWindow {  
  subWindowName: string = ''  
  pagePath: string = ''  
  posX: number = 0  
  posY: number = 0  
  windowWidth: number = 0  
  windowHeight: number = 0  
  
  constructor(subWindowName: string, pagePath: string, posX: number, posY: number, windowWidth: number, windowHeight: number) {  
    this.subWindowName = subWindowName  
    this.pagePath = pagePath  
    this.posX = posX  
    this.posY = posY  
    this.windowWidth = windowWidth  
    this.windowHeight = windowHeight  
  }  
}  
  
export function createSubWindow(windowStage: window.WindowStage, subWindowInfo: SubWindow) {  
  windowStage.createSubWindow(subWindowInfo.subWindowName, (err, windowClass) => {  
    if (err.code > 0) {  
      return;  
    }  
    // 设置子窗口加载页  
    try {  
      windowClass.setUIContent(subWindowInfo.pagePath, () => {  
        windowClass.setWindowBackgroundColor('#00000000')  
      });  
      // 设置子窗口左上角坐标  
      windowClass.moveWindowTo(subWindowInfo.posX, subWindowInfo.posY)  
      // 设置子窗口大小  
      windowClass.resize(subWindowInfo.windowWidth, subWindowInfo.windowHeight)  
      // 展示子窗口  
      windowClass.showWindow();  
      // 设置子窗口全屏化布局不避让安全区  
      // windowClass.setWindowLayoutFullScreen(true);  
    } catch (err) {  
      console.error("failed to create subWindow Cause:" + err)  
    }  
  })  
}
分享
微博
QQ
微信
回复
2024-10-23 15:01:26
相关问题
基于子窗口实现应用内悬浮
718浏览 • 1回复 待解决
HarmonyOS 二级页面左滑关闭问题
222浏览 • 1回复 待解决
Navigation二级导航嵌套
1163浏览 • 1回复 待解决
HarmonyOS 需要二级联动demo
275浏览 • 1回复 待解决
二级浮层出场动画实现
727浏览 • 1回复 待解决
HarmonyOS 应用并发同步代码
393浏览 • 1回复 待解决
HarmonyOS 点击tabs如何跳转到二级页面
382浏览 • 1回复 待解决
HarmonyOS 能否提供Web工程代码
185浏览 • 1回复 待解决
eTS求助 tabBarIcon代码
5816浏览 • 1回复 待解决
HarmonyOS有没有悬浮组件或者库
405浏览 • 1回复 待解决
如何通过代码关闭子窗口
383浏览 • 1回复 待解决
HarmonyOS H5拉起系统相机代码
245浏览 • 1回复 待解决