HarmonyOS鸿蒙Next中自定义弹窗CustomDialog如何设置弹出后仍可以点击底层的事件？

HarmonyOS鸿蒙Next中自定义弹窗CustomDialog如何设置弹出后仍可以点击底层的事件？ 如图所示，界面弹出一个自定义弹窗CustomDialog，位于BottomStart位置，宽高分别是80%、50%，如何在其弹出后，底层的事件（打钩的按键）仍可被点击？

maskRect这个属性是否可以实现，不太清楚这个属性的具体使用方法，该怎么设置呢？


更多关于HarmonyOS鸿蒙Next中自定义弹窗CustomDialog如何设置弹出后仍可以点击底层的事件？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

maskRect是针对于当前窗口左上角设置去除遮蔽层区域,在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。效果可见该demo：

// xxx.ets @CustomDialog struct CustomDialogExample { controller?: CustomDialogController cancel: () => void = () => { } confirm: () => void = () => { } build() { Column() { Text(‘这是自定义弹窗’) .fontSize(30) .height(100) Button(‘点我关闭弹窗’) .onClick(() => { if (this.controller != undefined) { this.controller.close() } }) .margin(20) } } } @Entry @Component struct CustomDialogUser { dialogController: CustomDialogController | null = new CustomDialogController({ builder: CustomDialogExample({ cancel: () => { this.onCancel() }, confirm: () => { this.onAccept() } }), cancel: this.existApp, autoCancel: false, onWillDismiss:(dismissDialogAction: DismissDialogAction) => { console.info(“reason=” + JSON.stringify(dismissDialogAction.reason)) console.log(“dialog onWillDismiss”) if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { dismissDialogAction.dismiss() } if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { dismissDialogAction.dismiss() } }, alignment: DialogAlignment.BottomStart, offset: { dx: 0, dy: -20 }, customStyle: false, maskRect: ({ x: 0, y: ‘40%’, width: ‘100%’, // height: ‘100%’ }), cornerRadius: 20, width: ‘80%’, height: ‘50%’, borderWidth: 1, borderStyle: BorderStyle.Dashed,//使用borderStyle属性，需要和borderWidth属性一起使用 borderColor: Color.Blue,//使用borderColor属性，需要和borderWidth属性一起使用 backgroundColor: Color.White, shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}), }) // 在自定义组件即将析构销毁时将dialogController置空 aboutToDisappear() { this.dialogController = null // 将dialogController置空 }

onCancel() { console.info(‘Callback when the first button is clicked’) }

onAccept() { console.info(‘Callback when the second button is clicked’) }

existApp() { console.info(‘Click the callback in the blank area’) }

build() { Column() { Button(‘click me’) .onClick(() => { if (this.dialogController != null) { this.dialogController.open() } }).backgroundColor(0x317aff) Button(‘click me111’) .onClick(() => { // if (this.dialogController != null) { // this.dialogController.open() // } }).backgroundColor(0x317aff) }.width(‘100%’).margin({ top: 5 }) } }

更多关于HarmonyOS鸿蒙Next中自定义弹窗CustomDialog如何设置弹出后仍可以点击底层的事件？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，自定义弹窗CustomDialog默认弹出后会遮挡底层界面，使底层界面无法响应点击事件。要实现弹出后仍可以点击底层事件，可以通过以下步骤实现：

  1. 设置弹窗的透明度：通过修改CustomDialog的背景透明度，使底层界面可见且可点击。

  2. 重写onTouchEvent方法：在CustomDialog中重写onTouchEvent方法，判断点击事件是否发生在弹窗区域外，如果是则直接返回false，让事件传递到底层界面。

  3. 设置CustomDialog的touchable属性：在CustomDialog的布局文件中，设置touchable属性为false，使弹窗本身不拦截触摸事件。

具体代码示例：

import { CustomDialog, TouchEvent } from '@ohos.arkui.UIContext';

class MyCustomDialog extends CustomDialog {
  onTouchEvent(event: TouchEvent): boolean {
    // 判断点击事件是否在弹窗区域外
    if (!this.isInsideDialog(event)) {
      return false; // 事件传递到底层界面
    }
    return super.onTouchEvent(event);
  }

  private isInsideDialog(event: TouchEvent): boolean {
    // 判断点击事件是否在弹窗区域内
    const rect = this.getDialogRect();
    return rect.contains(event.getX(), event.getY());
  }

  private getDialogRect(): Rect {
    // 获取弹窗的矩形区域
    const width = this.getWidth();
    const height = this.getHeight();
    return new Rect(0, 0, width, height);
  }
}

通过以上方法，可以在CustomDialog弹出后仍允许点击底层界面的事件。

在HarmonyOS鸿蒙Next中，自定义弹窗CustomDialog默认会阻止底层事件的响应。若需实现弹窗弹出后仍可点击底层事件，可以通过以下步骤实现：

  1. 设置弹窗背景透明：在CustomDialog的布局文件中，将背景设置为透明，例如使用android:background="@android:color/transparent"。

  2. 设置弹窗窗口属性：在CustomDialog的onCreate方法中，通过Window对象设置FLAG_NOT_TOUCH_MODAL标志，允许底层事件响应。代码如下：

    Window window = getWindow();
if (window != null) {
    window.addFlags(WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL);
}

  3. 调整弹窗布局：确保弹窗布局不影响底层控件的点击区域。

通过这些设置，弹窗弹出后仍可响应底层事件。

回到顶部