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') 
    } 
  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

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

HarmonyOS

put_get

2024-09-02 12:27:28

浏览

回答 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) 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

// 自定义组件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() { 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.

// 页面使用

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%') 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

2024-09-02 17:10:57

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看