HarmonyOS createWindow 创建的 window 遮挡拦截了点击事件

window.createWindow 创建出来的 window 会拦截全屏的点击事件，导致无法点击背后的视图。

我们在项目中用 window 来实现自定义弹窗、snackBar等功能，通过 window.createWindow 方法，传入 context、type=Dialog 来创建 window，之后用 resize 方法，将 window 大小设置到展示的位置，然后 show 出来。

目前存在的问题是，window 并非全屏展示的，只是占了显示的一小部分（从Inspector 中看也是），但是 window 展示的时候，会全屏地拦截所有的点击事件，导致无法点击到背后的视图。

1.我们之前用的是 windowStage 的 createSubwindow 方法，subWindow 在resize 之后表现正常，不会拦截背后事件。所以这是 window 的特性还是 bug？有方法可以规避吗？

2.之前用 subWindow 存在的问题是 subWindow 展示会影响 router 的行为，导致无法跳转路由，但是用 window 是可以正常跳转的，但现在用 window 则存在全屏拦截手势的问题，请问有没有什么两全其美的解决方案呢？

HarmonyOS

FengTianYa

2024-08-29 09:26:46

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

1.Q：我们之前用的是 windowStage 的 createSubwindow 方法，subWindow 在resize 之后表现正常，不会拦截背后事件。所以这是 window 的特性还是 bug？有方法可以规避吗？

A：该现象是window的特性，会拦截点击事件

2.Q：之前用 subWindow 存在的问题是 subWindow 展示会影响 router 的行为，导致无法跳转路由，但是用 window 是可以正常跳转的，但现在用 window 则存在全屏拦截手势的问题，请问有没有什么两全其美的解决方案呢？

A：采用router.pushUrl跳转页面的时候，是全局性的并没有和某个ui实例绑定，在多实例场景下使用比较混乱，导致实例获取接口行为不一致。

解决方案及示例：

推荐使用指定UI实例对象的正式方案：

this.getUIContext().getRouter().pushUrl({url:"XXX"})

模拟的登录页面代码如下：

文件为 Index.ets

import {CcbInputView} from "./CcbPage" 
import { router } from '@kit.ArkUI'; 
import {Loading} from '../utils/SubWindow' 
import { http } from '@kit.NetworkKit'; 
@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
  build() { 
    Row() { 
      Column() { 
        CcbInputView() 
        CcbInputView() 
        Button('登录') 
          .onClick(async ()=>{ 
            let loading =new Loading(); 
            await loading.OpenSubWindows();  // 展示loading页面 
            let httpRequest=http.createHttp(); 
            await httpRequest.request("www.huawei.com")    
            await loading.CloseSubWindows()  // 关闭loading页面 
            router.pushUrl({url:'@bundle:com.example.keyboarderr/hsplibrary/ets/pages/SubmitPage'})  // 模拟跳转到的登陆成功页面 
          }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}

登录请求时候的子窗loading页面代码如下

文件为SubPage.ets

import { window } from '@kit.ArkUI'; 
import * as SubPage from '../pages/SubPage'; // 导入命名路由页面 
 
export class Loading { 
  windowStage: window.WindowStage=AppStorage.get('windowStage') as window.WindowStage; 
  win:window.Window|undefined= undefined; 
  async OpenSubWindows() { 
    // let windowStage: window.WindowStage=AppStorage.get('windowStage') as window.WindowStage; 
    let win=await this.windowStage.createSubWindow("loading"); 
    this.win=win; 
    let storage: LocalStorage=new LocalStorage(); 
    storage.setOrCreate('storageSimpleProp', 121); 
    await win.loadContentByName(SubPage.entryName, storage); 
    await win.resize(500, 500); 
    await win.moveWindowTo(500, 500) 
    await win.showWindow(); 
  } 
  async CloseSubWindows(){ 
   await this.win?.destroyWindow(); 
  } 
}

分析是因为利用await将异步转为同步，就不会有时序错乱的问题，不会出现多实例调用router.pushUrl 方法。

侧滑失效是因为子窗口聚焦了，可以设置子窗口不聚焦，

1.设置子窗口不聚焦（防止左滑事件不作用在主窗口上）：

FloatWindowUtil.sub_windowClass.setWindowFocusable(false)

2.在AudioFloatingWidget页面增加onBackPress()方法，方法里手动关闭子窗口

onBackPress(): boolean | void { 
FloatWindowUtil.destroySubWindow() 
}

参考链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5

2024-08-29 18:11:13

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS createWindow 创建的 window 遮挡拦截了点击事件

订阅鸿蒙技术特刊，精选内容抢先看