HarmonyOS 弹出的全屏loading如何避免阻止touchUp事件的触发

1、创建一个按钮挂载touch事件,在touchDown时触发语音识别同时加载带遮罩的loading挂载在window上。

2、此时松手不会触发touchUp事件,导致语音识别无法停止。

3、尝试设置HitTestMode.None给该loading组件:自身不接收事件,但不会阻塞兄弟/孩子继续做触摸测试给该loading依旧不起作用。

Column() {
}
.hitTestBehavior(HitTestMode.None)
.backgroundColor('#cc000000')
.borderRadius(UiConst.NUMBER_10)
.margin({
  top: this.options.position === Alignment.Top ? UiConst.NUMBER_40 : UiConst.NUMBER_20,
  bottom: this.options.position === Alignment.Bottom ? UiConst.NUMBER_40 : UiConst.NUMBER_20,
  left: UiConst.NUMBER_20,
  right: UiConst.NUMBER_20
})
.padding({ top: UiConst.NUMBER_20, bottom: UiConst.NUMBER_20, left: UiConst.NUMBER_20, right: UiConst.NUMBER_20 })
}
.alignContent(this.options.position ? this.options.position : Alignment.Center)
  .width('100%')
  .height('100%')
  .hitTestBehavior(HitTestMode.None)
}
loading显示:
await windowClass.loadContentByName('efLoading', efStorage);
//获取屏幕四大角
let d = display.getDefaultDisplaySync();
//设置窗口大小
await windowClass.resize(d.width, d.height);
// 设置窗口背景颜色
windowClass.setWindowBackgroundColor('#22000000');
//显示窗口
await windowClass.showWindow();
HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

可以用createSubWindow创建子窗口的方式加载全局loading,参考示例如下:

//EntryAbility.ets
import { UIAbility } from '@kit.AbilityKit';
import { KeyboardAvoidMode, window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    ...
    // 给Index页面传递windowStage
    AppStorage.setOrCreate('windowStage', windowStage);
    ...
  }
}
//Index.ets
import { display, window } from '@kit.ArkUI'
import './efLoading'
import { BusinessError } from '@kit.BasicServicesKit';

let windowStage_: window.WindowStage | undefined = undefined;
let sub_windowClass: window.Window | undefined = undefined;

@Entry
@Component
struct Index {
  @State text: string = '...'

  build() {
    Column() {
      Text(this.text)
      Button('触发事件')
        .onTouch((event: TouchEvent) => {
          console.log(JSON.stringify(event))
          if (event.type === TouchType.Down) {
            this.text = '按下'
            this.CreateSubWindow();
          }
          if (event.type === TouchType.Up) {
            this.text = '弹起'
            this.destroySubWindow();
          }
        })
    }
    .alignItems(HorizontalAlign.Center)
    .width('100%')
    .height('100%')
  }

  //创建子窗口
  private CreateSubWindow() {
    // 获取windowStage
    windowStage_ = AppStorage.get('windowStage');
    // 1.创建应用子窗口。
    if (windowStage_ == null) {
      console.error('Failed to create the subwindow. Cause: windowStage_ is null');
    } else {
      windowStage_.createSubWindow("mySubWindow", (err: BusinessError, data) => {
        let errCode: number = err.code;
        if (errCode) {
          console.error('Failed to create the subwindow. Cause: ' + JSON.stringify(err));
          return;
        }
        sub_windowClass = data;
        console.info('Succeeded in creating the subwindow. Data: ' + JSON.stringify(data));
        // 2.子窗口创建成功后,设置子窗口的位置、大小及相关属性等。
        sub_windowClass.moveWindowTo(0, 0, (err: BusinessError) => {
          let errCode: number = err.code;
          if (errCode) {
            console.error('Failed to move the window. Cause:' + JSON.stringify(err));
            return;
          }
          console.info('Succeeded in moving the window.');
        });
        let d = display.getDefaultDisplaySync();
        sub_windowClass.resize(d.width, d.height, (err: BusinessError) => {
          let errCode: number = err.code;
          if (errCode) {
            console.error('Failed to change the window size. Cause:' + JSON.stringify(err));
            return;
          }
          console.info('Succeeded in changing the window size.');
        });
        // 3.为子窗口加载对应的目标页面。
        sub_windowClass.loadContentByName("efLoading", (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.');
          // 设置窗口颜色
          (sub_windowClass as window.Window).setWindowBackgroundColor('#6b000000');
          // 3.显示子窗口。
          (sub_windowClass as window.Window).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.');
          });
        });
      })
    }
  }

  //销毁子窗口
  private destroySubWindow() {
    // 4.销毁子窗口。当不再需要子窗口时,可根据具体实现逻辑,使用destroy对其进行销毁。
    (sub_windowClass as window.Window).destroyWindow((err: BusinessError) => {
      let errCode: number = err.code;
      if (errCode) {
        console.error('Failed to destroy the window. Cause: ' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in destroying the window.');
    });
  }
}
//efLoading.ets
@Entry({ routeName: 'efLoading' })
@Component
export default struct efLoading {
  @State text: string = 'loading...'

  build() {
    Column() {
      Text(this.text)
        .fontColor('#fff')
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-window-stage-V5#设置应用子窗口

分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 全屏loading
29浏览 • 1回复 待解决
如何阻止Flex容器鼠标事件穿透
2031浏览 • 1回复 待解决
HarmonyOS 键盘弹出避免整体界面上移
11浏览 • 1回复 待解决
长按事件如何重复触发
2123浏览 • 1回复 待解决