「HarmonyOS」CustomDialogController自定义弹窗使用方法

需求背景：

在开发的过程中，总会遇到一些功能需要使用到弹窗进行信息的输入和修改，如用户个人信息的修改；在UI设计上每个App通常都会有各自的样式，而不是使用系统的标准样式，所以通常我们需要进行自定义弹窗来实现信息填写需求

模块介绍

在ArkTs中，CustomDialogController提供这个对应功能，如下是在官方文档中的介绍:

通过CustomDialogController类显示自定义弹窗。使用弹窗组件时，可优先考虑自定义弹窗，便于自定义弹窗的样式与内容。

样式展示

先进行样式展示一下，然后根据这个样式进行代码编写

这是当输入有误时的样式，当输入超过限制字符数量时，会展示错误提示，并且不能继续添加输入，当删除后字数小于限制字数时，错误提示消失

实践操作

该自定义弹窗需要复用，需要用时给于修改昵称和修改个性签名使用，所以在标题，输入框提示语等内容上会有所不同

1.创建自定义弹窗样式

需要使用@CustomDialog装饰器来表达这是一个自定义弹窗

@CustomDialog
struct UserInputDialogView {
  // 弹窗标题
  @State dialogViewTitle: string = ''
  // 输入框提示语
  @State placeHolderContent: string = ''
  // 是否展示错误提示
  @State isShowErrorMsg: boolean = false
  // 是否超过了字数限制
  @State MoreMaxLength: boolean = false
  // 输入的内容
  @State textValue: string = ''
  // 最大输入字符数字
  inputMaxNumber: number
  controller: CustomDialogController
  // 取消方法回调
  cancel: () => void
  // 确认方法回调
  confirm: (text: string) => void

  build() {
    Column() {
      Row() {
        Text(this.dialogViewTitle)
          .fontSize(16)
          .fontColor($r('app.color.24292B'))
          .fontWeight(FontWeight.Medium)
      }
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
      .width(BaseUtils.screenWidth - 38)
      .height(24)
      .margin({top: 16})
      
      // 直接引用输入框提示内容和输入内容
      TextInput({placeholder: this.placeHolderContent, text: this.textValue})
        .width(BaseUtils.screenWidth - 64)
        .height(56)
        .backgroundColor($r('app.color.F5F5F5'))
        .caretColor($r('app.color.FF8000'))
        .borderRadius(8)
        .margin({top: 16})
        .type(InputType.Normal)
        // 用于打开弹窗后，焦点直接落在弹窗上，以便于直接弹出输入键盘
        .key('popUpKeyboard')
        .onFocus(() => {
          sendEventByKey('popUpKeyboard', 10, '弹出键盘')
        })
        .onChange((value) => {
          this.textValue = value
          if (value.length > this.inputMaxNumber) {
          	// 如果输入内容超过限制字符，展示错误提示
            this.MoreMaxLength = true
            this.textValue = this.textValue.substring(0,this.inputMaxNumber)

          } else if (value.length == this.inputMaxNumber) {
           	// 如果输入内容长度等于限制字符
           	// 如果为刚好等于则不展示
           	// 如果已超出限制字符则展示错误提示
            if (this.MoreMaxLength) {
              this.isShowErrorMsg = true
            }

          } else {
            this.isShowErrorMsg = false
            this.MoreMaxLength = false
          }
        })

	  // 错误提示
      if (this.isShowErrorMsg) {
        Text(`最多不超过${this.inputMaxNumber}个字`)
          .fontSize(12)
          .fontColor($r('app.color.F7313B'))
          .fontWeight(FontWeight.Regular)
          .textAlign(TextAlign.Start)
          .width(BaseUtils.screenWidth - 72)
          .margin({top: 2})
      }

      Flex({direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween}) {
        Button('取消')
          .fontSize(16)
          .fontColor($r('app.color.24292B'))
          .fontWeight(FontWeight.Medium)
          .backgroundColor($r('app.color.F7F7F7'))
          .size({width: 144, height: 44})
          .borderRadius(22)
          .onClick(() => {
            this.controller.close()
            this.cancel()
          })

        Button('确定')
          .fontSize(16)
          .fontColor(this.textValue.length == 0 ? $r('app.color.FFFFFF_50') : $r('app.color.FFFFFF'))
          .fontWeight(FontWeight.Medium)
          .backgroundColor(this.textValue.length == 0 ? $r('app.color.FF8000_50') : $r('app.color.FF8000'))
          .size({width: 144, height: 44})
          .borderRadius(22)
          .enabled(this.textValue.length == 0 ? false : true)
          .margin({left: 25})
          .onClick(() => {
          	// 确认按钮 返回输入文本内容，并且关闭自定义弹窗
            this.confirm(this.textValue)
            this.controller.close()
          })
      }
      .width(BaseUtils.screenWidth - 64)
      .height(44)
      .margin({top: this.isShowErrorMsg ? 8 : 24})
    }
    .alignItems(HorizontalAlign.Center)
    .width(BaseUtils.screenWidth)
    .backgroundColor($r('app.color.FFFFFF'))
    .height(215)
    .borderRadius(16)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

2.初始化自定义弹窗

以修改个性签名弹窗为例

userSignDialogController: CustomDialogController = new CustomDialogController({
    builder: UserInputDialogView({
      dialogViewTitle: '个性签名',
      placeHolderContent: '请输入个性签名(限制15个字)',
      inputMaxNumber: 15,
      cancel: () => {},
      confirm: (text: string) => {
      	// 修改个性签名请求 
        HttpApiManager.getInstance().updateUserInfo(new UserInfoBean(null, null, text))
          .then((data: UserInfoBean) => {
            this.userInfo = data
            // 用户数据更新通知
            // 具体可见我《EventHub事件通知详细使用方法》文章
            EventHubUtil.emit('updateUserInfo')
            ToastUtil.getInstance().showToast('修改成功')

          })
          .catch(error => {
            ToastUtil.getInstance().showToast(error.message)
          })
      },
    }),
    // 是否点击弹窗其他地方蒙层关闭
    autoCancel: true,
    // 弹窗在竖直方向上的对齐方式
    alignment: DialogAlignment.Default,
    // 是否使用自定义样式
    customStyle: true
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3.销毁自定义弹窗

在页面销毁前，需销毁自定义弹窗，以避免系统资源浪费

aboutToDisappear() {
    delete this.userSignDialogController,
    this.userSignDialogController = undefined
  }
1
2
3
4

4.调用/打开自定义弹窗

在摁钮或者View的onClick方法中进行调用方法以实现点击打开

if (this.userSignDialogController != undefined) {
    this.userSignDialogController.open()
}
1
2
3

5.关闭自定义弹窗

这个在自定义弹窗的取消和确认按钮中有写入该方法

//  取消按钮的点击事件
.onClick(() => {
   // 关闭自定义弹窗
   this.controller.close()
   this.cancel()
})
1
2
3
4
5
6

参考文档

自定义弹窗API
自定义弹窗（CustomDialog）指南

当前HarmonyOs仍在初步学习过程中，大家如果感兴趣或者有问题可以一起沟通交流
如果该文章对你有所帮助的话，可以点赞、收藏并关注一下！后续会持续更新更多技术内容