HarmonyOS NEXT鸿蒙开发入门，自定义弹窗 (CustomDialog)+数据交互

1.官网文档指南

1. 自定义弹窗 (CustomDialog) https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-common-components-custom-dialog-V5

2. 自定义弹窗 (CustomDialog)详细API：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5

2. 描述

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

1. 接口
   constructor(value: CustomDialogControllerOptions)

自定义弹窗的所有参数，不支持动态刷新。

2. 参数：

参数名	类型	必填	描述
value	CustomDialogControllerOptions	是	配置自定义弹窗的参数。

3. CustomDialogControllerOptions对象说明

参数名	类型	必填	描述
builder	CustomDialog	是	自定义弹窗内容构造器。 说明： 若builder构造器使用回调函数作为入参，请注意使用this绑定问题，如build: custombuilder({ callback: ()=> {…}})。 若在builder构造器中监听数据变化请使用@Link，其他方式如@Prop、@ObjectLink不适用此场景。 元服务API： 从API version 11开始，该接口支持在元服务中使用。
cancel	() => void	否	返回、ESC键和点击遮障层弹窗退出时的回调。 元服务API： 从API version 11开始，该接口支持在元服务中使用。
alignment	DialogAlignment	否	弹窗在竖直方向上的对齐方式。 默认值：DialogAlignment.Default 元服务API： 从API version 11开始，该接口支持在元服务中使用。

更多详细API,请看官方文档指南

3. 实现过程

1. 使用@CustomDialog装饰器装饰自定义弹窗
2. @CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）

@CustomDialog
struct CustomDialogExample {
  @State inputValue: string = ''
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),

  })
  //定义一个方法，将inputValue回调到CustomDialogPage
  confirm?: (value: string) => void

  build() {
    Column() {
      Text('我是内容')
        .fontSize(20)

      TextInput({
        placeholder: '请输入手机号',

      })
        .margin({ top: 30 })
        .borderWidth(2)
        .borderColor(Color.Blue)
        .maxLength(11)
        .type(InputType.Number)//监听输入框的值
        .onChange((value: string) => {
          this.inputValue = value
        })


      Row() {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
          }).backgroundColor(0xffffff).fontColor(Color.Black)

        Button('confirm')
          .onClick(() => {

            if (this.inputValue == '') {
              promptAction.showToast({
                message: '手机号不能为空'
              })
              return
            }

            if (this.confirm) {
              //将数据回调过去
              this.confirm(this.inputValue)

              //Toast提示
              promptAction.showToast({
                message: this.inputValue
              })

              //关闭比弹框
              this.controller.close()
            }


          }).backgroundColor(0xffffff).fontColor(Color.Red)

      }.width('100%')
      .margin({ top: 30 })
      .justifyContent(FlexAlign.SpaceBetween)

    }.padding(30)
  }
}

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

  //创建构造器，与装饰器呼应相连。
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({

      //接收
      confirm: (value: string) => {
        this.inputValue = value
      }
    }),
    //设置弹框显示方向：在底部，默认居中显示
    alignment: DialogAlignment.Bottom,
    //点击外部不取消
    autoCancel: false,

  })

4. 点击与onClick事件绑定的组件使弹窗弹出。

@Entry
@Component
struct CustomDialogPage {
  @State inputValue: string = ''

  //创建构造器，与装饰器呼应相连。
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({

      //接收
      confirm: (value: string) => {
        this.inputValue = value
      }
    }),
    //设置弹框显示方向：在底部，默认居中显示
    alignment: DialogAlignment.Bottom,
    //点击外部不取消
    autoCancel: false,

  })

  build() {
    RelativeContainer() {

      Button('自定义弹窗 (CustomDialog)')
        .id('button01')
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })

        .onClick(() => {
          this.dialogController.open()

        })


      Text(this.inputValue)
        .alignRules({
          bottom: { anchor: 'button01', align: VerticalAlign.Top },
          right: { anchor: 'button01', align: HorizontalAlign.End },
          left: { anchor: 'button01', align: HorizontalAlign.Start }

        })
        .textAlign(TextAlign.Center)
        .margin({ bottom: 30 })
        .fontWeight(600)![请添加图片描述](https://i-blog.csdnimg.cn/direct/3c8d1f07c6584f269059c9a4d70a4615.gif)



    }
    .height('100%')
    .width('100%')
    .padding(10)
  }
}

4. 如何将CustomDialogExample弹框内的数据传递到到CustomDialogPage页面？

答：数据交互，接着往下看

5. 如何数据交互

在CustomDialogExample中

1. 定义一个有参数方法，具体看需求，也可以定义多个参数，多个方法

confirm?: (value: string) => void

2. 在页面CustomDialogPage 内需要在构造器内进行接收，同时创建相应的函数操作

  //创建构造器，与装饰器呼应相连。
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({

      //接收
      confirm: (value: string) => {
        this.inputValue = value
      }
    }),
    //设置弹框显示方向：在底部，默认居中显示
    alignment: DialogAlignment.Bottom,
    //是否允许点击遮障层退出，true表示关闭弹窗。false表示不关闭弹窗。
    autoCancel: false,

  })

6. 运行效果图