HarmonyOS 自定义CustomDialog如何实现静态打开

自定义CustomDialog如何使用静态接口打开,不在当前页面申明。我尝试了外部使用接口,无法实现。想要像官方的以下功能一样。

AlertDialog.show( 
  { 
    title: '收不到验证码', 
    subtitle: '', 
    message: '请检查手机号正确或存在欠费等情况,也可使用语音验证进行验证', 
    autoCancel: true, 
    alignment: DialogAlignment.Bottom, 
    gridCount: 4, 
    offset: { dx: 0, dy: -20 }, 
    primaryButton: { 
      value: '取消', 
      action: () => { 
        console.info('Callback when the first button is clicked') 
      } 
    }, 
    secondaryButton: { 
      enabled: true, 
      defaultFocus: true, 
      style: DialogButtonStyle.HIGHLIGHT, 
      value: '语音验证', 
      action: () => { 
        this.sendVoiceCode(this.phoneData.phone); 
        // console.info('Callback when the second button is clicked') 
      } 
    }, 
    cancel: () => { 
      console.info('Closed callbacks') 
    } 
  }

跨模块打开一个CustomDialog,想使用接口的方式直接打开。

HarmonyOS
2024-09-02 12:27:28
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

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

所以没法通过接口函数来实现。

以下方案提供参考:

1、如果是简单的弹框,可以尝试使用promptAction.openCustomDialog

参考文档:

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

2、如果是使用@CustomDialog 可以定义一个全局的弹框组件,在需要使用的地方引用。

参考demo:

// 自定义弹窗组件:CustomDialogView.ets

@CustomDialog 
export struct CustomDialogView { 
  @Link visible: boolean; 
  controller: CustomDialogController; 
  // 弹窗交互事件参数,点击确认和取消按钮时的回调函数 
  onCancel?: () => void; 
  onConfirm?: () => void; 
 
  build() { 
    Column() { 
      Text('测试自定义弹框') 
        .fontSize(20) 
        .padding({ top: 12 }) 
      Row() { 
        Button('取消') 
          .backgroundColor('#FFFFFF') 
          .fontColor('#0A59F7') 
          .fontSize(20) 
          .width(120) 
          .onClick(() => { 
            this.visible = false; 
            this.onCancel?.(); 
          }) 
      } 
      .justifyContent(FlexAlign.Center) 
    } 
    .borderRadius(12) 
    .justifyContent(FlexAlign.SpaceAround) 
    .backgroundColor('#FFFFFF') 
    .height(100) 
    .width(300) 
  } 
}

// 自定义组件Dialog,对自定义弹窗组件进行二次封装Dialog.ets

import { CustomDialogView } from './CustomDialogView'; 
 
@Component 
export struct Dialog { 
  // 监听外部传入的visible变量,visible值发生变化时触发onChange回调函数 
  @Watch("onChange") @Link visible: boolean; 
  onCancel?: () => void; 
  onConfirm?: () => void; 
  // 通过CustomDialogController的builder参数绑定弹窗组件CustomDialogView 
  private controller = new CustomDialogController({ 
    builder: CustomDialogView({ 
      visible: $visible, 
      onCancel: this.onCancel, 
      onConfirm: this.onConfirm, 
    }), 
    autoCancel: false, 
    customStyle: true, 
    alignment: DialogAlignment.Center, 
    maskColor: '#57050505', 
  }) 
  /** 
 
当visible的值变化时触发回调 
 
   */ 
  onChange(): void{ 
    if (this.visible) { 
      this.controller.open(); 
    } else { 
      this.controller.close(); 
    } 
  } 
  // 二次封装的Dialog组件主要通过控制器控制弹窗,不需要任何界面 
  build() { 
  } 
}

// 页面使用

import { Dialog } from './Dialog'; 
@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
  @State visible: boolean = false; 
 
  build() { 
    Row() { 
      Column() { 
        Text(this.message) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
          .onClick(()=>{ 
            this.visible = !this.visible 
          }) 
        Dialog({ 
          visible: $visible 
        }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}
分享
微博
QQ
微信
回复
2024-09-02 17:10:57
相关问题
CustomDialog自定义动画
321浏览 • 1回复 待解决
HarmonyOSCustomDialog自定义Dialog
169浏览 • 1回复 待解决
HarmonyOS 自定义弹窗CustomDialog问题
461浏览 • 1回复 待解决
HarmonyOS 自定义弹窗 (CustomDialog)问题
205浏览 • 1回复 待解决
CustomDialog不支持自定义动画
312浏览 • 2回复 待解决
HarmonyOS 数字自定义键盘如何实现
227浏览 • 1回复 待解决
HarmonyOS自定义组件增加方法如何实现
320浏览 • 1回复 待解决
HarmonyOS CoverFlow效果自定义组件实现
170浏览 • 1回复 待解决
如何实现自定义应用入场动画
714浏览 • 1回复 待解决