HarmonyOS 支付输入弹框

1、整体的实现考虑用CustomDialog来实现，因为支付是无光标，所以建议使用6个Text拼接实现，不需要使用TextInput，然后在点击自定义键盘时候，触发事件在Text显示，加密显示使用图片展示类似于*的效果参考以下实现方式:

@CustomDialog
  //弹窗装饰器，自定义弹窗
struct CustomDialogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
  })
  services: Array<string> = ['1', '2', '3', '4', '5', '6', '7', '8', '9', ' ', '0', 'X']
  numbers: Array<number> = [1, 2, 3, 4, 5, 6]
  @State Inputs: Array<string> = []

  build() { //设置弹窗内容
    Column() {
      Text('请输入支付密码')
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })
      Row({ space: 5 }) {
        ForEach(this.numbers, (item: number) => {
          Text(this.Inputs.length >= item ? '*' : '')
            .width(20)
            .height(20)
            .backgroundColor('#C0C0C0')
            .textAlign(TextAlign.Center)
        })
      }
      .width('100%')
      .height('15%')
      .justifyContent(FlexAlign.Center)

      Grid() {
        ForEach(this.services, (service: string) => {
          GridItem() {
            Text(service)
          }
          .borderWidth(0.4)
          .borderColor(Color.Gray)
          .onClick(() => {
            if (service != 'X' && service != ' ') {
              this.Inputs.push(service)
              if (this.Inputs.length == 6) {
                this.controller.close()
              }
            }
            if (service == 'X') {
              this.Inputs.pop()
            }
          })
        })
      }
      .width('100%')
      .height('60%')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsTemplate('1fr 1fr 1fr')
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

@Entry
@Component
struct Index {
  dialogController: CustomDialogController = new CustomDialogController({
    //弹窗构造器，与装饰器相呼应
    builder: CustomDialogExample(),
  })

  build() {
    Column() {
      Button('支付')
        .onClick(() => {
          this.dialogController.open()
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceAround)
  }
}
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.