HarmonyOS Next快速入门：@CustomDialog自定义弹窗

HarmonyOS Next快速入门##HarmonyOS应用开发##教育

点击跳转《HarmonyOS Next快速入门》视频教程

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

接口

constructor(value: CustomDialogControllerOptions)

CustomDialogControllerOptions对象说明

• builder：自定义弹窗内容构造器。
• cancel：返回、ESC键和点击遮障层弹窗退出时的回调。
• autoCancel：是否允许点击遮障层退出，true表示关闭弹窗。false表示不关闭弹窗。（默认值：true）
• alignment：弹窗在竖直方向上的对齐方式。（默认值：DialogAlignment.Default）
• offset：弹窗相对alignment所在位置的偏移量。（默认值：{ dx: 0, dy: 0 }）
• customStyle：弹窗容器样式是否自定义。
• gridCount：弹窗宽度占栅格宽度的个数。默认为按照窗口大小自适应，异常值按默认值处理，最大栅格数为系统最大栅格数。取值范围：大于等于0的整数。
• maskColor：自定义蒙层颜色。（默认值: 0x33000000）
• maskRect：弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。（默认值：{ x: 0, y: 0, width: '100%', height: '100%' }）
• openAnimation：自定义设置弹窗弹出的动画效果相关参数。
• closeAnimation：自定义设置弹窗关闭的动画效果相关参数。
• showInSubWindow：某弹框需要显示在主窗口之外时，是否在子窗口显示此弹窗。（默认值：false，弹窗显示在应用内，而非独立子窗口。）
• backgroundColor：设置弹窗背板填充。（默认值：Color.Transparent）
• cornerRadius：设置背板的圆角半径。可分别设置4个圆角的半径。（默认值：{ topLeft: '32vp', topRight: '32vp', bottomLeft: '32vp', bottomRight: '32vp' }）
• isModal：弹窗是否为模态窗口，模态窗口有蒙层，非模态窗口无蒙层。（默认值：true，此时弹窗有蒙层。）
• onWillDismiss：交互式关闭回调函数。
• borderWidth：设置弹窗背板的边框宽度。可分别设置4个边框宽度。（默认值：0。）百分比参数方式：以父元素弹窗宽的百分比来设置弹窗的边框宽度。当弹窗左边框和右边框大于弹窗宽度，弹窗上边框和下边框大于弹窗高度，显示可能不符合预期。
• borderColor：设置弹窗背板的边框颜色。默认值：Color.Black如果使用borderColor属性，需要和borderWidth属性一起使用。

自定义弹窗的界面可以通过装饰器@CustomDialog定义的组件来实现

@CustomDialog
export struct WelcomeDialog {
   
  controller: CustomDialogController
  confirm?: () => void
  cancel?: () => void

  build() {
   
    Column({
    space: 10 }) {
   
      Text("欢迎使用")
      Text('请同意')
      Text('《用户协议》')

      Button('同意').onClick(() => {
   
        this.controller.close()
        if (this.confirm) {
   
          this.confirm()
        }
      }).width(150)

      Button('不同意')
        .width(150)
        .backgroundColor(Color.Gray)
        .onClick(() => {
   
          this.controller.close()
          if (this.cancel) {
   
            this.cancel()
          }
        })

    }.padding(10)
  }
}

然后通过CustomDialogController来控制自定义弹窗的显示和隐藏。

import {
    WelcomeDialog } from './componnents/WelcomeDialog';

@Entry
@Component
struct CustomDialogPage {
   
  @State message: string = '第2节 @CustomDialog自定义弹窗';
  @State dialogResult: string = ''
  dialogController: CustomDialogController = new CustomDialogController({
   
    builder: WelcomeDialog({
   
      cancel: () => {
   
        this.dialogResult = '不同意'
      },
      confirm: () => {
   
        this.dialogResult = '同意'
      },
    }),
  })

  build() {
   
    Column({
   space:10}) {
   
      Text(this.message)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Button('自定义弹窗').onClick(() => {
   
        this.dialogController.open()
      })

      Text('自定义弹窗执行结果：' + this.dialogResult)
    }
    .height('100%')
    .width('100%')
  }
}