HarmonyOS 鸿蒙Next promptAction.openCustomDialog如何实现点击弹窗阴影区域时弹窗不关闭

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS 鸿蒙Next promptAction.openCustomDialog如何实现点击弹窗阴影区域时弹窗不关闭

项目使用到了promptAction.openCustomDialog弹出一个全局的自定义弹窗，我们的需求是弹窗需要模态弹出，用户只能操作弹窗的按钮才能继续流程。

但现在使用了弹出弹框后，点击弹窗区域外阴影部分弹窗就关闭了，如何将这一特性关闭掉？

2 回复

可以使用 onWillDismiss 方法：

当用户执行点击遮障层关闭、左滑/右滑、三键 back、键盘 ESC 关闭交互操作时，如果注册该回调函数，则不会立刻关闭弹窗。在回调函数中可以通过 reason 得到阻拦关闭弹窗的操作类型，从而根据原因选择是否能关闭弹窗。

参考 demo

import { BusinessError } from '@ohos.base';
import { ComponentContent } from "@ohos.arkui.node";
import { PromptAction } from '@kit.ArkUI';

// 弹框属性
export class Params {
  text: string = ""
  backgroundColor: string = ""
  opacity: number = 1
  width: number = 0
  height: number = 0
  btnControl: string = ''
}

// 自定义弹框
@Builder
function buildText(params: Params) {
  Column() {
    Text(params.text || '默认内容')
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .margin({ bottom: 36 })
  }
  .width(params.width || 200)
  .height(params.height || 400)
  .backgroundColor(params.backgroundColor || '#FFF0F0F0')
  .opacity(params.opacity)
}

// 弹框控制
export function setDialog(uiContext: UIContext, promptAction: PromptAction, params: Params) {
  let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), params);
  try {
    promptAction.openCustomDialog(contentNode, {
      onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
        if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
          console.log('点击遮罩层事件：',)
          if (params.btnControl !== '关闭控制') {
            dismissDialogAction.dismiss()
          }
        }
      }
    });
  } catch (error) {
    let message = (error as BusinessError).message;
    let code = (error as BusinessError).code;
    console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
  }
}

@Entry
@Component
struct Index {
  @State message: string = "hello"
  private uiContext = this.getUIContext()
  private promptAction = this.getUIContext().getPromptAction()

  build() {
    Row() {
      Column() {
        Button("控制弹框关闭")
          .margin(10)
          .width('80%')
          .onClick(() => {
            let params: Params = new Params()
            params.btnControl = '关闭控制'
            setDialog(this.uiContext, this.promptAction, params)
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next promptAction.openCustomDialog如何实现点击弹窗阴影区域时弹窗不关闭的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中，promptAction.openCustomDialog 用于显示自定义对话框。要实现点击弹窗阴影区域时不关闭弹窗，通常需要在对话框的布局和事件处理上进行特定设置。

在HarmonyOS的对话框实现中，默认行为是点击阴影区域会关闭对话框。为了改变这一行为，你需要在对话框的布局文件中添加对阴影区域的点击事件监听，并在监听器中不做关闭对话框的操作。

具体步骤如下：

  1. 自定义对话框布局：确保你的对话框布局文件（XML）中有一个覆盖整个对话框区域（包括阴影部分）的根视图（如DirectionalLayout或DependentLayout）。

  2. 设置点击事件：为这个根视图设置一个点击事件监听器。在监听器的实现中，不添加关闭对话框的代码。这样，当用户点击阴影区域时，由于事件被根视图捕获且未执行关闭操作，对话框将保持打开状态。

  3. 使用对话框API：在打开对话框时，确保使用正确的API和参数，以应用你自定义的布局。

示例代码（伪代码，具体实现需根据HarmonyOS SDK文档调整）：

// 假设你已经有了自定义布局资源ID：R.layout.custom_dialog
Dialog dialog = new Dialog(this);
dialog.setContentView(R.layout.custom_dialog);

// 获取根视图并设置点击事件
View rootView = dialog.findViewById(R.id.root_view);
rootView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 不执行关闭对话框的操作
    }
});

dialog.show();

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部