鸿蒙Next-实现自定义弹窗（带有输入框的弹窗）

1.实现效果

弹窗演示

2.代码实现

1.创建一个弹窗布局，注：使用@CustomDialog，并且导出

@CustomDialog
export struct WifiDialogExample {
  @Link value1: string
  @Link value2: string
  cancel?: () => void
  confirm?: () => void
  controller: CustomDialogController

  build() {
    Column() {
      Text("请输入:")
        .margin({ top: 10 })
        .height(30).width('90%')
      TextInput({ placeholder: 'WifiName' })
        .onChange((value: string) => {
          this.value1 = value
        })
        .margin({ top: 10 })
        .height(60).width('90%')
      TextInput({ placeholder: 'Password' })
        .onChange((value: string) => {
          this.value2 = value
        })
        .margin({ top: 10 })
        .height(60).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
            if (this.cancel) {
              this.cancel()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            this.controller.close()
            if (this.confirm) {
              this.confirm()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ top: 10, bottom: 10 })
    }
  }
}

2.在需要显示弹窗的地方创建弹窗管理器，并且实现自定义弹窗实例

   

@Entry
@Component
struct WIFI {
  @State message: string = 'Wi-Fi管理';
  @State wifiName: string = ''
  @State wifiPassword: string = ''
  // 翻转
  private matrix1 = matrix4.identity().rotate({ x: 0, y: 1, z: 0, angle: 180 })
  @Styles transformStyle(){
    .transform(this.matrix1)
  }

  dialogController: CustomDialogController | null = new CustomDialogController({
  builder: WifiDialogExample({
    cancel: () => {
      this.onCancel()
    },
    confirm: () => {
      this.onAccept()
    },
    value1 : $wifiName,
    value2 : $wifiPassword
  })
})

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    let profile: wifiManager.WifiProfile = makeWifiProfile(this.wifiName, this.wifiPassword)
    try {
      wifiManager.setWifiProfileSync(wantTemp, profile);
      console.info('Succeeded in setting wifi profile.');
      ShowAlertDialog.showAlertDialogTimeout('Succeeded in setting wifi profile.')
    } catch (err) {
      ShowAlertDialog.showAlertDialogTimeout('Failed to set wifi profile.')
      console.error(`Failed to set wifi profile. Code: ${err.code}, message: ${err.message}`);
    }
    console.info('Callback when the second button is clicked')
  }

  build() {
    RelativeContainer() {
      Row() {
        Image($r("app.media.go"))
          .width('10%')
          .height(40)
          .transformStyle()
          .onClick(() => {
            router.back()
          })

        Text(this.message)
          .width('90%')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .alignRules({
            middle: { anchor: '__container__', align: HorizontalAlign.Center }
          })
      }
      .id('header')
      .width('100%')
      .height('10%')
      .backgroundColor(Color.White)

      Column() {
        List({ space : 15 }) {
          ForEach(WIFI_DATA, (item: Data) => {
            ListItem() {
              Row() {
                Text(item.name)
                  .fontColor(Color.Black)
                  .fontSize(22)
                  .width('80%')
                  .alignRules({
                    left: { anchor: 'listItem', align: HorizontalAlign.Start }
                  })


                Image($r("app.media.go"))
                  .width(30)
                  .height(30)
                  .alignRules({
                    right: { anchor: 'listItem', align: HorizontalAlign.End }
                  })
              }
              .id('listItem')
              .width('100%')
              .height(80)
              .margin({ left: 20, right: 20 })
            }
            .backgroundColor('#fff')
            .onClick(() => {
              if (item.name == WIFI_SET_POINT_WIFI) {
                if (this.dialogController != null) {
                  this.dialogController.open()
                }
              }
            })
          })
        }
        .margin({ top: 10, bottom: 10 })
      }
      .height('90%')
      .backgroundColor('#ff9b9696')
      .margin({ top: 10 })
      .alignRules({
        top: { anchor: 'header', align: VerticalAlign.Bottom },
      })
    }.width('100%').height('100%')
  }
}