HarmonyOS 能否提供一个关于显示全局最上层UI的示例

能否提供一个关于显示全局最上层UI的示例(类似一个悬浮窗组件),且可随@State修饰的变量更新。

HarmonyOS
2025-01-09 16:26:53
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

请使用子窗口实现:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#createsubwindow9,参考如下实例:

1、EntryAbility.ets:

windowStage.loadContent('pages/Index', (err) => {
  if (err.code) {
    hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
    return;
  }
  // 保存窗口管理器
  AppStorage.setOrCreate('windowStage', windowStage);
  // 创建子窗
  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.showWindow();
      // 设置子窗口全屏化布局不避让安全区
      windowClass.setWindowLayoutFullScreen(true);
    } catch (err) {
      console.error(`failed to create subWindow Cause: ${err}`);
    }
  })
  hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
});

2、MySubWindow.ets:

import { display, inspector, router, window } from '@kit.ArkUI';

@Entry
@Component
struct MySubWindow {
  @State message: string = 'Hello World';
  @State windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage;
  @State subWindow: window.Window = window.findWindow('mySubWindow');
  @State @Watch('moveWindow') windowPosition: Position = { x: 0, y: 0 };
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All });

  onPageShow(): void {
    let subWindowID: number = window.findWindow('mySubWindow').getWindowProperties().id;
    // 获取主窗口ID
    let mainWindowID: number = this.windowStage.getMainWindowSync().getWindowProperties().id;
    // 将焦点从子窗口转移到主窗口
    window.shiftAppWindowFocus(subWindowID, mainWindowID);

    const subWindow: window.Window = window.findWindow('mySubWindow');
    // 设置子窗口大小
    subWindow.resize(vp2px(75), vp2px(75));
  }
  // 将悬浮窗移动到指定位置
  moveWindow() {
    this.subWindow.moveWindowTo(this.windowPosition.x, this.windowPosition.y);
  }

  build() {
    Column() {
      Image($rawfile('1.gif'))
        .onClick(()=>{
          router.pushUrl({url:'pages/MySubWindow1'})
        })
    }
    .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');
        })
    )
  }
}

interface Position {
  x: number,
  y: number
}

3、MySubWindow1.ets:

onPageShow(): void {
  const subWindow: window.Window = window.findWindow('mySubWindow');
  // 设置子窗口大小
  subWindow.resize(vp2px(200), vp2px(400));
}
分享
微博
QQ
微信
回复
2025-01-09 17:58:28
相关问题
HarmonyOS 查询当前最上层运行应用
579浏览 • 1回复 待解决
能否提供一个关于SM3加密demo?
1141浏览 • 1回复 待解决
HarmonyOS 能否提供一个视频压缩demo
432浏览 • 1回复 待解决
HarmonyOS能否提供一个NFC识别的demo
755浏览 • 1回复 待解决
能否提供一个SM3加密案例
963浏览 • 1回复 待解决
提供一个关于地图组件使用小demo
1088浏览 • 1回复 待解决
HarmonyOS 实现一个全局浮动视图
274浏览 • 1回复 待解决
提供一个简单示例
2330浏览 • 1回复 待解决