鸿蒙Next中CustomDialogController如何封装

在鸿蒙Next开发中，想封装一个通用的CustomDialogController以便复用，但不太清楚具体实现方式。比如如何统一管理弹窗生命周期，以及如何自定义样式和交互逻辑？希望能提供封装思路或示例代码，最好能支持动态传入布局和回调函数。

2 回复

鸿蒙Next里封装CustomDialogController？简单！就像把大象塞进冰箱：

  1. 继承CustomDialogController，重写onAboutToShow()和onAboutToHide()。
  2. 在Builder里用setCustomDialog()绑定布局。
  3. 记得在页面用@Link装饰器关联控制器。
    搞定！代码比你的待办事项清单还整齐～（如果还卡壳，建议检查Builder里的组件树是否在偷偷摸鱼）

更多关于鸿蒙Next中CustomDialogController如何封装的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，封装CustomDialogController可提升代码复用性和可维护性。以下是推荐做法：

1. 基础封装（推荐）

// CustomDialogController封装类
export class CustomDialogControllerHelper {
  private controller: CustomDialogController | null = null;

  // 创建并显示弹窗
  showDialog(builder: CustomDialogBuilder, cancelable?: boolean): void {
    this.controller = new CustomDialogController({
      builder: builder,
      cancelable: cancelable ?? true, // 默认可取消
      autoCancel: true // 默认自动取消
    });
    this.controller.open();
  }

  // 关闭弹窗
  closeDialog(): void {
    if (this.controller) {
      this.controller.close();
      this.controller = null;
    }
  }

  // 获取当前状态
  get isShowing(): boolean {
    return this.controller !== null;
  }
}

2. 具体弹窗组件封装示例

// 在具体页面中使用
@Component
struct MyPage {
  private dialogHelper = new CustomDialogControllerHelper();

  // 显示确认弹窗
  showConfirmDialog() {
    const builder = new CustomDialogBuilder({
      builder: ()=>{
        Column({ space: 12 }) {
          Text('确认操作').fontSize(18)
          Text('确定要执行此操作吗？').fontSize(14)
          
          Flex({ justifyContent: FlexAlign.SpaceAround }) {
            Button('取消')
              .onClick(() => this.dialogHelper.closeDialog())
            Button('确定')
              .onClick(() => {
                // 处理确认逻辑
                this.dialogHelper.closeDialog();
              })
          }
        }
        .padding(20)
      }
    });

    this.dialogHelper.showDialog(builder);
  }
}

3. 进阶封装（支持配置化）

export interface DialogConfig {
  title: string;
  message: string;
  confirmText?: string;
  cancelText?: string;
  onConfirm?: () => void;
}

export class DialogManager {
  static showConfigDialog(config: DialogConfig) {
    const builder = new CustomDialogBuilder({
      builder: () => this.buildDialogContent(config)
    });
    
    new CustomDialogController({ builder }).open();
  }

  private static buildDialogContent(config: DialogConfig) {
    // 根据config构建弹窗内容
    // 实现略...
  }
}

封装要点：

  1. 统一管理弹窗生命周期
  2. 支持参数化配置
  3. 提供状态查询方法
  4. 避免内存泄漏（及时置空controller）

使用方式：

// 在组件中直接调用
DialogManager.showConfigDialog({
  title: '提示',
  message: '操作成功',
  confirmText: '确定'
});

这种封装方式使弹窗逻辑更清晰，便于统一管理和维护。

回到顶部