HarmonyOS 支付输入弹框

支付输入弹框

HarmonyOS
2024-12-20 17:03:50
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

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)
  }
}
分享
微博
QQ
微信
回复
2024-12-20 19:16:09
相关问题
HarmonyOS 如何主动隐藏输入
427浏览 • 1回复 待解决
HarmonyOS CustomDialog报错
343浏览 • 1回复 待解决
HarmonyOS 隐私协议
198浏览 • 1回复 待解决
HarmonyOS PermissionDialog无法
286浏览 • 1回复 待解决
HarmonyOS 如何实现全局
484浏览 • 1回复 待解决
HarmonyOS 应用级全局
729浏览 • 1回复 待解决
HarmonyOS 嵌套的实现
323浏览 • 1回复 待解决
HarmonyOS API调用与Dialog
553浏览 • 0回复 待解决
HarmonyOS 通知授权无法弹出 -
409浏览 • 1回复 待解决
HarmonyOS 密码输入
368浏览 • 1回复 待解决
获取定位权限没有
2339浏览 • 1回复 待解决
代码获取后台权限?
3756浏览 • 1回复 待解决
HarmonyOS 软键盘挤压Toast
238浏览 • 1回复 待解决
HarmonyOS 输入只能输入字母和数字
478浏览 • 1回复 待解决
HarmonyOS 自定义组件问题
854浏览 • 1回复 待解决
HarmonyOS 自定义封装问题
354浏览 • 1回复 待解决
HarmonyOS 自定义不能全屏
466浏览 • 1回复 待解决