#鸿蒙通关秘籍#如何实现自定义组件方式的全局弹窗封装？

为了实现自定义组件方式的全局弹窗封装，可以按照以下步骤进行：

1. 创建一个自定义弹窗组件，包含可见性状态和交互事件：

   @CustomDialog
   export struct CustomDialogView {
     @Link visible: boolean;
     controller: CustomDialogController;
     onCancel?: () => void;
     onConfirm?: () => void;
   
     build() {
       Row() {
         Button()
           .onClick(() => {
             this.visible = false;
             this.onCancel?.();
           })
       }
     }
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.

   复制

2. 通过新建组件对弹窗进行封装，来处理可见性变化和控制弹窗的打开关闭：

   @Component
   export struct Dialog {
     @Watch("onChange") @Link visible: boolean;
     onCancel?: () => void;
     onConfirm?: () => void;
     private controller = new CustomDialogController({
       builder: CustomDialogView({
         visible: $visible,
         onCancel: this.onCancel,
         onConfirm: this.onConfirm,
       }),
     })
   
     onChange(): void {
       if (this.visible) {
         this.controller.open();
       } else {
         this.controller.close();
       }
     }
   
     build() {}
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.
   20.
   21.
   22.
   23.

   复制

3. 在使用时导入封装好的组件并设置可见性状态：

   @Component
   export struct CustomDialog {
     @State visible: boolean = false;
   
     build() {
       Column({ space: 20 }) {
         Button()
           .onClick(() => this.visible = !this.visible)
   
         Dialog({
           visible: $visible,
         })
       }
     }
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.

   复制