任何应用都离不开弹窗，今天我们就基于ArkTS开发语言，介绍下弹窗的实现方式。鸿蒙弹窗分为：

警告弹窗

警告弹窗AlertDialog，由标题、内容、操作按钮三部分组成，具体代码为：

Button('点击显示警告弹窗')
          .onClick(() => {
            AlertDialog.show(
              {
                title: '这是标题', // 标题
                message: '这里是内容啊，这里是内容', // 内容
                autoCancel: false, // 点击遮障层时，是否关闭弹窗。
                alignment: DialogAlignment.Bottom, // 弹窗在竖直方向的对齐方式
                offset: { dx: 0, dy: -20 }, // 弹窗相对alignment位置的偏移量
                primaryButton: {
                  value: '取消',
                  action: () => {
                    console.info('Callback when the first button is clicked');
                  }
                },
                secondaryButton: {
                  value: '删除',
                  fontColor: '#D94838',
                  action: () => {
                    console.info('Callback when the second button is clicked');
                  }
                },
                cancel: () => { // 点击遮障层关闭dialog时的回调
                  console.info('Closed callbacks');
                }
              }
            )
          })

选择类弹窗

这类弹窗，多数应用于性别、出生日期、地区等选择。比如：

• TextPickerDialog
• DatePickerDialog

文本选择窗TextPickerDialog，代码为：

日期选择窗DatePickerDialog，代码为：

如果以上不能满足需求，我们还可以自定义自己的弹窗。

自定义弹窗

自定义弹窗的使用更加灵活，适用于更多的业务场景，在自定义弹窗中您可以自定义弹窗内容，构建更加丰富的弹窗界面。自定义弹窗的界面可以通过装饰器@CustomDialog定义的组件来实现，然后结合CustomDialogController来控制自定义弹窗的显示和隐藏。

上图可以看出，自定义弹窗其实是加载了一个自定义的构建结构体，也就是builder后面的结构体，本例中的AddTargetDialog，代码为：

import { CommonConstants } from '../common/constant/CommonConstant';

@Preview
@CustomDialog
export default struct AddTargetDialog {
  private controller?: CustomDialogController;
  private taskName: string = ''
  private onClickOk ?: (value: string) => void;

  build() {

    Column() {

      Text('添加子目录')
        .width(CommonConstants.FULL_WIDTH)
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT)
        .fontColor('#182431')
        .textAlign(TextAlign.Center)

      TextInput({ placeholder: '请输入子目标名称' })
        .placeholderColor(Color.Gray)
        .placeholderFont({ size: 16 })
        .caretColor(Color.Blue)
        .backgroundColor('#0d182431')
        .width(CommonConstants.FULL_WIDTH)
        .height(CommonConstants.DIALOG_INPUT_HEIGHT)
        .margin({ top: CommonConstants.DIALOG_INPUT_MARGIN })
        .fontSize(16)
        .onChange((value) => {
          this.taskName = value
        })

      Blank()

      Row() {
        Button('取消')
          .dialogButtonStyle()
          .onClick(() => {
            this.controller.close()
          })
        Divider().vertical(true)
        Button('确定')
          .dialogButtonStyle()
          .onClick(() => {
            if (this.onClickOk !== undefined) {
              this.onClickOk(this.taskName)
            }
          })
      }
      .width(CommonConstants.DIALOG_OPERATION_WIDTH)
      .height(CommonConstants.DIALOG_OPERATION_HEIGHT)
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .padding('24vp')
    .width(CommonConstants.DIALOG_WIDTH)
    .height('168vp')
    .borderRadius(32)
    .backgroundColor(Color.White)

  }
}

@Extend(Button) function dialogButtonStyle() {
  .fontSize(16)
  .height(32)
  .width(96)
  .backgroundColor(Color.White)
  .fontColor('#007dff')

}

看着很多，其实很简单，首先是Column布局，从上到下分为：标题、输入框、操作按钮。其实它就是一个UI组件，嵌入到了CustomDialogController这个容器中，形成了一个弹窗。至于其他的属性，和上面两种类型的弹窗都差不多。

原创不易，鉴于本人水平有限，文中如有错误之处欢迎大家指正。欢迎大家点个关注，我将继续为大家分享相关的技术内容。