HarmonyOS ：自定义弹窗（CustomDialog）的解耦实践

引言

在鸿蒙开发中使用 CustomDialogController 和 @CustomDialog 可实现自定义弹窗交互。但 controller 的定义位置却有很大的限制。

限制如下：

CustomDialogController仅在作为@CustomDialog和@Component struct的成员变量，且在@Component struct内部定义时赋值才有效

对于 Dialog 的能力封装我们通常会将其与调用者页面解耦，以 Flutter 为例，我们可能会这么封装：

typedef DialogCallback = Function(String data);

// 随便一个工具类
abstract class DialogTool {
  
  static void showCustomDialog(
    BuildContext context,
    DialogCallback callback, // 定义回调
  ) {
    showDialog(
      context: context,
      builder: (context) {
        return Dialog(
          child: YourWidget(), // dialog UI
        );
      },
    ).then(
      (data) => {
        callback(data),
      },
    );
  }
  
}

在工具类提供静态方法，调用方可直接调用并获取返回值。

而在 ArkTS 页面内开发一个自定义弹窗，不可避免的会有一堆冗余代码需要被嵌在调用者UI层，下面我来举个例子：

首先使用 @CustomDialog 定义一个简单的带回调的 Dialog

@CustomDialog
export struct MyCustomDialog {
  private controller: CustomDialogController
  //确定按钮回调
  confirmed: (message: string) => void = (_) => {
  }

  build() {
    Column() {
      Text('这是一个自定义弹窗')
      Button('点击传递数据给调用方').onClick(() => {
        this.controller.close()
        this.confirmed('你好，我是弹窗点击返回的内容')
      })
    }
  }
}

调用者页面需要定义 CustomDialogController 绑定 MyCustomDialog 来唤起自定义弹窗

@Component
struct HomePage {
  dialogController?: CustomDialogController | null

  private async showDialog(): Promise<string | undefined> {
    let resolveFunc: (value: string | undefined | PromiseLike<string | undefined>) => void = () => {
    }
    const promise = new Promise<string | undefined>(
      (resolve, _) => {
        resolveFunc = resolve
      }
    )
    this.dialogController = new CustomDialogController({
      builder: MyCustomDialog(
        {
          confirmed: (info) => {
            resolveFunc(info)
          },
        }
      )
    })
    this.dialogController?.open()
    return promise
  }

  build() {
    Column(){
      ... 你的UI布局
    }
  }
}

如上，页面内冗余代码主要体现在 showDialog(){} 内，当你的页面需要具备多种业务的自定义弹窗时，你就需要在同一个页面定义多个 showDialog() 方法用以显示不同的弹窗，接收不同的回执传参。

整体的代码会变得很乱，结构封装会失去简洁性。

如果不能避开限制，怎么做解耦？

我们实践的方案是做一个空白中间层，用于存放 CustomDialogController 与 CustomDialog 的绑定工作（代码），只给上层UI提供一个 controller 用来控制弹窗开启、关闭、以及接收返回值。以此达到与调用方浅解耦的目的。

已上文中的 MyCustomDialog 为例，新建一个文件 CustomDialogContainer, 代码如下：

/// 为了将dialog的初始化与与使用dialog的页面解耦
@Component
export struct CustomDialogContainer {
  @Link @Watch('onDialogToggle') controller: DialogContainerController
  dialogController?: CustomDialogController | null

  onDialogToggle() {
    if (this.controller.isOpen) {
      this.showDialog().then((data) => {
        this.controller.onDialogConfirm(data)
      })
    } else {
      this.dialogController?.close()
    }
  }

  // 选择退款原因弹窗
  private async showDialog(): Promise<string | undefined> {
    let resolveFunc: (value: string | undefined | PromiseLike<string | undefined>) => void = () => {
    }
    const promise = new Promise<string | undefined>(
      (resolve, _) => {
        resolveFunc = resolve
      }
    )
    this.dialogController = new CustomDialogController({
      builder: MyCustomDialog(
        {
          confirmed: (info) => {
            resolveFunc(info)
          },
        }
      ),
    })
    this.dialogController?.open()
    return promise
  }

  build() {
    Column()
  }
}

export class DialogContainerController {
  isOpen: boolean = false;
  onDialogConfirm: (value: string | undefined) => void

  constructor(onConfirm: (value: string | undefined) => void) {
    this.onDialogConfirm = onConfirm
  }

  public open() {
    this.isOpen = true
  }

  public close() {
    this.isOpen = false
  }
}

从 build(){} 可以看出这是一个空白的 Component 组件。

在调用者页面我们这样使用

@Component
export struct HomePage {
  @State dialogController: DialogContainerController = new DialogContainerController(
    (message: string | undefined) => {
      // 这里接收到弹窗内确定按钮点击返回的数据
      if (message != undefined) {
        // 你的业务逻辑
      }
    }
  )

  // 如果有多个样式的弹窗，定义多个 dialogController 然后统一在这里管理
  @Builder
  DialogControllerBuilder() {
    Column() {
      CustomDialogContainer({
        controller: this.dialogController
      })
    }
  }

  build() {
    Column() {
      this.DialogControllerBuilder()
      ... 你的UI
    }
  }
}

调用者业务只持有自定义弹窗的 controller 处理交互，如果有多个自定义弹窗，则定义多个 controller ，统一存放管理，在一定程度内减少了独立业务的代码冗余。

附注（Example）

Demo示例（基于API11开发，支持NEXT及以上版本运行）已上传可供参考，包含如下内容：

静态库+多模块设计
状态管理+统一路由管理
网络请求、Loading、Log（支持长文本打印）等工具库封装
自定义组件、自定义弹窗（解耦）
EventBus 事件通知