HarmonyOS 鸿蒙Next @CustomDialog的自定义弹框使用不方便，如何封装更方便调用？

发布于 1周前 作者 wuwangju 来自 鸿蒙OS

HarmonyOS 鸿蒙Next @CustomDialog的自定义弹框使用不方便，如何封装更方便调用？

@CustomDialog的自定义弹框使用不方便，如何封装更方便调用？

Harmonyos Next教程
3 回复

或者采用封装成一个组件，参考下面的例子

// 弹窗交互
[@CustomDialog](/user/CustomDialog)
export struct CustomDialogExample {
 controller?: CustomDialogController
 [@Link](/user/Link) visible: Visibility
 isAutoCancel: boolean = true;

 build() {
   Column() {
     Row() {
       Text('Hello World')
       .fontSize(20)
     }
     .padding(8)
     .backgroundColor('#FFFFFF')
     .height(200)
       .margin({ bottom: -5 })
       .width('100%')
   }
   .justifyContent(FlexAlign.End)
   .width('100%')
   .height('100%')
   .margin({
     bottom: -15
   })
     .onClick(() => {
       console.log('dialogClick')
       if (this.isAutoCancel) {
         this.cancel();
       }
     })
     .visibility(this.visible)
     .transition(TransitionEffect.asymmetric(
       TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 300 }),
       TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 300 }))
     )
 }

 cancel() {
   this.visible = Visibility.Hidden
 }
}

[@Component](/user/Component)
export struct MyCustomDialog {
 [@Watch](/user/Watch)('onChange') [@Link](/user/Link) visible: Visibility

 private controller = new CustomDialogController({
   builder: CustomDialogExample({ visible: $visible }),
   customStyle: true
 })

 onChange() {
   if (this.visible === Visibility.Visible) {
     this.controller.open()
   } else {
     console.log('syt onchange close window');
     this.controller.close()
   }
 }
 build() {
 }
}

更多关于HarmonyOS 鸿蒙Next @CustomDialog的自定义弹框使用不方便，如何封装更方便调用？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


[@CustomDialog](/user/CustomDialog)的自定义弹窗暂时不支持复用，每次使用只能在组件中重新写一次弹窗样式。

可以试下用@ohos.promptAction去创建弹窗。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-promptaction-V13#promptactionopencustomdialog11

在HarmonyOS鸿蒙系统中，针对@CustomDialog的自定义弹框使用不便的问题，可以通过封装一个通用的自定义Dialog类来简化调用。具体实现步骤如下：

  1. 创建自定义Dialog类： 定义一个继承自CustomDialog的类，在该类中初始化并配置Dialog的布局、样式和行为。

  2. 配置布局： 在自定义Dialog类中，通过XML布局文件或代码动态设置Dialog的布局。确保布局文件或代码逻辑能满足多种使用场景的需求。

  3. 提供公共方法： 在自定义Dialog类中提供静态方法，如show(Context context, String title, String message)，该方法内部负责创建并显示Dialog实例。通过传递必要的参数（如标题、消息等），即可快速调用并显示Dialog。

  4. 处理回调： 如果Dialog中有按钮或其他交互元素，需要在自定义Dialog类中处理这些元素的点击事件，并对外提供设置回调的方法，以便在Dialog交互时执行特定操作。

示例代码（简化）：

// 注意：这里以伪代码形式展示，实际编写时请使用鸿蒙系统的UI框架和API
public class MyCustomDialog extends CustomDialog {
    // 初始化布局、按钮等
    public static void show(Context context, String title, String message) {
        // 创建Dialog实例，设置布局，显示Dialog
    }
    // 处理按钮点击等事件
}

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部