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

HarmonyOS
2024-12-03 11:19:59
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
系统小魔头

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

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

    @CustomDialog
    export struct CustomDialogView {
      @Link visible: boolean;
      controller: CustomDialogController;
      onCancel?: () => void;
      onConfirm?: () => void;
    
      build() {
        Row() {
          Button()
            .onClick(() => {
              this.visible = false;
              this.onCancel?.();
            })
        }
      }
    }
    
  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() {}
    }
    
  3. 在使用时导入封装好的组件并设置可见性状态:

    @Component
    export struct CustomDialog {
      @State visible: boolean = false;
    
      build() {
        Column({ space: 20 }) {
          Button()
            .onClick(() => this.visible = !this.visible)
    
          Dialog({
            visible: $visible,
          })
        }
      }
    }
    
分享
微博
QQ
微信
回复
2024-12-03 12:16:02
相关问题
如何封装全局自定义弹窗
1274浏览 • 1回复 待解决
HarmonyOS 全局自定义弹窗实现
1268浏览 • 1回复 待解决
HarmonyOS 如何封装自定义弹窗
1222浏览 • 1回复 待解决
HarmonyOS 如何创建自定义全局弹窗
1109浏览 • 1回复 待解决
HarmonyOS 自定义弹窗封装问题
1206浏览 • 1回复 待解决
HarmonyOS 使用全局自定义弹窗
1030浏览 • 1回复 待解决
HarmonyOS 全局自定义弹窗demo
1437浏览 • 1回复 待解决
如何全局实现一个自定义dialog弹窗
3978浏览 • 1回复 待解决
HarmonyOS 关于自定义弹窗封装调用
1828浏览 • 2回复 待解决
HarmonyOS 自定义dialog封装全局调用
1013浏览 • 1回复 待解决
HarmonyOS 全局自定义弹窗无法弹出
1159浏览 • 1回复 待解决
HarmonyOS 自定义弹窗封装后不显示
1490浏览 • 1回复 待解决