上一节我们实现了仿微信的底部页签栏，那么微信的个人资料页面支持修改用户昵称，点击个人资料的昵称栏，会跳到昵称修改页面。其实不用打开新页面，直接在当前页面弹出对话框也能修改，只是鸿蒙原生提供的对话框仅能显示提示文字，不能输入文字。要想在对话框中输入文字，就得自己定义基于CustomDialog的对话框，把编辑框塞到弹窗中。
下面详细介绍如何使用CustomDialog组件实现自定义的输入弹窗。

1、自定义对话框的整体框架

因为对话框属于独立的控件，允许被多个页面引用，所以可在单独的ETS文件中定义。自定义对话框以“@CustomDialog”前缀开头，并且内部必须声明CustomDialogController类型的控制器属性，这样外部页面才能通过控制器对象操纵对话框的交互动作。
对于多数对话框来说，一般要提供取消和确定两个按钮，那么自定义对话框内部还需声明取消接口和确定接口，由具体引用的页面去实现真正的取消操作和确定操作。比如下面代码就定义了一个自定义对话框的框架代码：

@CustomDialog
export struct CustomInputDialog {
  @State nickName: string = '';
  // @CustomDialog组件必须声明CustomDialogController属性
  dialogController?: CustomDialogController;
  // 取消接口，待实例化实现
  cancel: () => void = () => { }
  // 确认接口，待实例化实现
  confirm: (nickName: string) => void = () => { }

  build() {
    // 这里暂时省略内部组件的代码
  }
}

2、自定义对话框的布局内容

有了框架代码之后，再往自定义对话框的的build节点内部填充详细的对话框布局内容。就昵称输入弹窗而言，需要展示提示文字、编辑框、确定按钮、取消按钮等组件。然后点击取消按钮的时候，一边关闭对话框、一边触发取消事件；点击确定按钮的时候，一边关闭对话框、一边触发确定事件。
下面是给昵称输入弹窗编写的布局代码例子：

Column() {
  Text('请输入昵称')
    .fontSize(18).width('100%').textAlign(TextAlign.Center).margin(30)
  TextInput({ text: $$this.nickName, placeholder: '请输入昵称' })
    .height(40).margin(10).fontSize(18).fontColor(Color.Black)
  Row() {
    Button('取消')
      .fontSize(18).layoutWeight(1).margin(5)
      .backgroundColor(Color.Gray)
      .onClick(() => {
        this.dialogController?.close()
        this.cancel() // 响应取消事件
      })
    Button('确定')
      .fontSize(18).layoutWeight(1).margin(5)
      .onClick(() => {
        this.dialogController?.close()
        this.confirm(this.nickName) // 响应确认事件
      })
  }.padding(10).margin({bottom:10})
}.width('100%')

3、App页面实现自定义对话框

接下来回到Page页面代码，首先实例化自定义的对话框控制器对象。控制器的构造方法中传入待设置的对话框属性，主要包括下列三种初始属性：
builder：设置前面第一步定义的自定义对话框对象，需指定cancel取消动作和confirm确定动作。
customStyle：自定义的对话框样式，一般填false即可。
alignment：对话框在引用页面的对齐方式。为DialogAlignment.Center表示居中对齐。
另外注意，取消动作和确定动作的实现代码可放在当前页面中，把两个动作的方法定义代码一块给出，参见下面的属性声明与方法定义代码例子：

dialogController: CustomDialogController = new CustomDialogController({
  builder: CustomInputDialog({
    cancel: (): void => this.cancel(),
    confirm: (nickName: string): void => this.confirm(nickName)
  }),
  customStyle: false,
  alignment: DialogAlignment.Center
});

cancel() {
  console.info('CustomInputDialog:cancel()')
}

confirm(nickName: string) {
  console.info('CustomInputDialog:confirm() '+nickName)
}

4、在点击事件中打开对话框

前面三步都准备好了，现在只要在点击某个组件时打开自定义的对话框就可以啦。打开方式很简单，调用前面第三步声明的控制器对象的open方法即可。
具体的对话框代码打开代码如下：

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

综合以上的自定义对话框布局代码，实现的仿微信的昵称修改弹窗如下：

下一篇文章会介绍如何实现微信聊天窗口的软键盘避让规则。