鸿蒙UI系统组件08——自定义弹窗(CustomDialog)

如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!扫描下面名片,关注公众号。

1、概述

自定义弹窗(CustomDialog)可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。

2、创建自定义弹窗

  1. 使用@CustomDialog装饰器装饰自定义弹窗。

  2. @CustomDialog装饰器用于装饰自定义弹框,此装饰器内进行自定义内容(也就是弹框内容

@CustomDialogstruct CustomDialogExample {
  
    controller: CustomDialogController  build() {
  
      Column() {
  
        Text('我是内容')      .fontSize(20)      .margin({ top: 10, bottom: 10 })    }  }}

3. 创建构造器,与装饰器呼应相连。

dialogController: CustomDialogController = new CustomDialogController({
  
      builder: CustomDialogExample({}),})
### 自定义弹窗 CustomDialog 参数的错误说法 在开发过程中,关于自定义弹窗 `CustomDialog` 的参数使用可能存在一些误解或错误的说法。以下是常见的错误说法及其分析: #### 1. **`CustomDialog` 不需要显式销毁** - 错误说法:`CustomDialog` 在页面销毁时会自动释放资源,无需开发者手动处理。 - 实际情况:在页面销毁前,必须显式销毁 `CustomDialog` 对象以避免系统资源浪费。例如,可以通过在 `aboutToDisappear` 方法中销毁控制器实例来实现[^4]: ```javascript aboutToDisappear() { delete this.userSignDialogController; this.userSignDialogController = undefined; } ``` #### 2. **`onWillDismiss` 回调总是会被触发** - 错误说法:无论用户如何关闭弹窗,`onWillDismiss` 回调都会被触发。 - 实际情况:在某些特定场景下,例如软键盘弹出时连续点击返回键两次,可能会导致 `onWillDismiss` 回调未被触发。这是因为软键盘关闭与弹窗关闭之间的交互影响了回调机制[^5]。为解决此问题,建议开发者检查软键盘状态并在必要时手动触发回调。 #### 3. **`CustomDialog` 的回调函数仅支持 `confirm` 和 `cancel`** - 错误说法:`CustomDialog` 的回调函数仅限于 `confirm` 和 `cancel`,无法扩展其他功能。 - 实际情况:开发者可以在初始化 `CustomDialog` 时定义自定义回调函数,并通过参数传递给父窗口处理逻辑[^3]。例如: ```javascript const dialog = new CustomDialog(new TestCustomDialogContentControl(), "自定义弹窗", { confirm: () => { console.log("确认按钮被点击"); }, cancel: () => { console.log("取消按钮被点击"); } }); dialog.ShowDialog(() => { return true; }); ``` #### 4. **`CustomDialog` 的内容控件必须继承特定基类** - 错误说法:`CustomDialog` 的内容控件必须继承某个特定的基类才能正常工作。 - 实际情况:只要内容控件符合 `CustomDialog` 的接口要求,即可作为弹窗内容使用。例如,以下代码展示了如何创建一个简单的自定义内容控件[^1]: ```javascript class TestCustomDialogContentControl { render() { return <div>这是一个自定义内容</div>; } } const dialog = new CustomDialog(new TestCustomDialogContentControl(), "自定义弹窗"); dialog.ShowDialog(() => { return true; }); ``` #### 5. **`CustomDialogController` 只能在 UI 类中使用** - 错误说法:`CustomDialogController` 只能用于 UI 类中,无法在纯逻辑类中调用弹窗显示和隐藏。 - 实际情况:通过将弹窗对象实例存储到上下文中,开发者可以在纯逻辑类中调用弹窗的显示和隐藏功能[^2]。例如: ```javascript class CustomDialogController { constructor(dialog) { this.dialog = dialog; } show() { this.dialog.ShowDialog(() => { return true; }); } hide() { this.dialog.Close(); } } ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值