【HarmonyOS 5】使用openCustomDialog如何禁止手势关闭的方案

【HarmonyOS 5】使用openCustomDialog如何禁止手势关闭的方案

一、前言

在HarmonyOS中使用openCustomDialog自定义弹框时,我们会遇到实现禁止手势关闭弹框的业务场景。 虽然在 HarmonyOS Next 中,自定义 Dialog 默认可能继承系统的侧滑返回手势,并且目前无法屏蔽,官方反馈未来版本可能会开放禁用选项。

在当前版本中,目前无法完全禁止手势关闭,但可以通过一些方法进行控制。例如,监听 onWillDismiss 事件可以在关闭时进行拦截,但需要处理不同的关闭原因。

华为官方文档明确提到了使用openCustomDialog时可以通过配置onWillDismiss回调来拦截关闭事件。在onWillDismiss中,可以检查DismissReason来判断关闭原因,例如用户滑动或点击外部。如果是手势关闭(如侧滑),可以通过返回false来阻止对话框关闭。可以通过监听onWillDismiss事件来禁止手势关闭。

openCustomDialog提供了onWillDismiss回调函数,当用户尝试通过滑动、点击外部、返回键等操作关闭弹窗时,会触发该回调。通过在回调中判断关闭原因并拦截操作,即可实现禁止手势关闭的效果。

二、方案思路

1. 定义自定义弹窗组件

typescript 复制代码
import { PromptAction, DismissReason } from '@ohos.prompt';

@Builder
function CustomDialogContent() {
  return Column() {
    Text('禁止手势关闭的弹窗')
      .fontSize(24)
      .fontWeight(FontWeight.Bold)
    Button('确认关闭')
      .onClick(() => {
        // 主动关闭弹窗
        promptAction.closeCustomDialog(dialogId);
      })
  }
  .padding(30)
  .backgroundColor(Color.White)
  .borderRadius(16)
  .width('80%')
}

2. 打开弹窗并设置拦截逻辑

typescript 复制代码
let promptAction = UIContext.getPromptAction();
let dialogId: number = 0;

promptAction.openCustomDialog({
  builder: () => CustomDialogContent(),
  alignment: DialogAlignment.Center,
  maskColor: 'rgba(0, 0, 0, 0.3)',
  autoCancel: false, // 禁止点击外部关闭
  onWillDismiss: (dismissAction) => {
    // 处理不同关闭原因
    switch (dismissAction.reason) {
      case DismissReason.SWIPE: // 侧滑关闭
      case DismissReason.BACK:   // 返回键关闭
        return false; // 阻止关闭
      default:
        return true; // 允许其他方式关闭
    }
  }
}).then(id => dialogId = id);

3. 关闭类型参数说明

参数 说明
autoCancel 控制是否允许点击外部关闭弹窗,设置为false可禁用该功能。
onWillDismiss 关闭事件回调函数,返回false可阻止关闭,返回true则允许关闭。
DismissReason 关闭原因枚举,包含SWIPE(侧滑)、BACK(返回键)等类型。

三、源码DEMO示例

typescript 复制代码
import { PromptAction, DismissReason } from '@ohos.prompt';

@Entry
@Component
struct App {
  private promptAction: PromptAction = UIContext.getPromptAction();
  private dialogId: number = 0;

  build() {
    Column() {
      Button('打开禁止手势关闭的弹窗')
        .onClick(() => this.showDialog())
    }
  }

  showDialog() {
    this.promptAction.openCustomDialog({
      builder: () => this.CustomDialogContent(),
      alignment: DialogAlignment.Center,
      maskColor: 'rgba(0, 0, 0, 0.3)',
      autoCancel: false,
      onWillDismiss: (dismissAction) => {
        console.log(`关闭原因:${dismissAction.reason}`);
        return dismissAction.reason === DismissReason.BUTTON; // 仅允许按钮关闭
      }
    }).then(id => this.dialogId = id);
  }

  @Builder
  CustomDialogContent() {
    return Column() {
      Text('禁止手势关闭')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
      Button('确认关闭')
        .onClick(() => this.promptAction.closeCustomDialog(this.dialogId))
    }
    .padding(30)
    .backgroundColor(Color.White)
    .borderRadius(16)
    .width('80%')
  }
}

注意 综上所述,可在HarmonyOS中实现openCustomDialog的手势关闭拦截。对于需要完全禁止系统级手势的场景,建议结合页面级导航拦截逻辑进行处理。 系统限制

  • 在HarmonyOS Next系统中,部分系统级手势(如从屏幕边缘向内滑动返回)可能无法完全拦截。
  • 建议通过onWillDismiss回调配合页面级onBackPress拦截实现更全面的控制。
相关推荐
xiaoqi9222 小时前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
听麟2 小时前
HarmonyOS 6.0+ 智慧出行导航APP开发实战:离线地图与多设备位置协同落地
华为·wpf·harmonyos
qq_177767372 小时前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos
jin1233224 小时前
基于React Native鸿蒙跨平台地址管理是许多电商、外卖、物流等应用的重要功能模块,实现了地址的添加、编辑、删除和设置默认等功能
javascript·react native·react.js·ecmascript·harmonyos
2501_920931704 小时前
React Native鸿蒙跨平台医疗健康类的血压记录,包括收缩压、舒张压、心率、日期、时间、备注和状态
javascript·react native·react.js·ecmascript·harmonyos
2501_920931705 小时前
React Native鸿蒙跨平台使用useState管理健康记录和过滤状态,支持多种健康数据类型(血压、体重等)并实现按类型过滤功能
javascript·react native·react.js·ecmascript·harmonyos
2501_921930835 小时前
高级进阶 React Native 鸿蒙跨平台开发:InteractionManager 交互优化
react native·harmonyos
前端不太难6 小时前
HarmonyOS PC 文档模型完整范式
华为·状态模式·harmonyos
ITUnicorn7 小时前
【HarmonyOS6】从零实现自定义计时器:掌握TextTimer组件与计时控制
华为·harmonyos·arkts·鸿蒙·harmonyos6
摘星编程7 小时前
OpenHarmony + RN:Stack堆栈导航转场
react native·react.js·harmonyos