鸿蒙自定义dialog弹窗及传参操作

第一步定义一个dialog：

@CustomDialog
export struct InputDialog {
  controller: CustomDialogController;
  @State counter: string = "10";
  changeInputValue: Function = (value: string) => {
  }

  build() {
    Column() {
      TextArea({ text: this.counter, placeholder: '请输入测试次数' })
        .width('90%')
        .height(40)
        .margin({ top: 20 })
        .borderRadius(0)
        .type(TextAreaType.NUMBER)
        .onChange((value: string) => {
          this.counter = value
        })
      Text()
        .width('100%')
        .borderWidth(0.5)
        .margin({ top: 20 })
        .borderColor('#838d97')
      Row() {
        Text('取消')
          .width('50%')
          .textAlign(TextAlign.Center)
          .onClick(() => {
            this.controller.close()
          })
        Text()
          .height(50)
          .borderWidth(0.5)
          .borderColor('#838d97')
        Text('确定')
          .width('50%')
          .fontColor('#ff127ad7')
          .textAlign(TextAlign.Center)
          .onClick(() => {
            this.changeInputValue(this.counter)
          })
      }
      .height(50)
    }
    .alignItems(HorizontalAlign.Center | VerticalAlign.Center)
    .width('80%')
    .backgroundColor('#FFFFFF')
    .borderRadius(10)
  }
}

第二步:初始化声明并接收传参回调

customDialogController: CustomDialogController = new CustomDialogController({
  builder: InputDialog({
    changeInputValue: (val: string) => {
      let num = Number(val);
      promptAction.showToast({
        message: "点击了" + num,
        duration: 1000
      })
      this.customDialogController.close()
    }
  }),
  alignment: DialogAlignment.Center,
  customStyle: true,
});

第三部:调用自定义dialog

this.customDialogController.open()

欢迎同行一起讨论交流！