HarmonyOS鸿蒙Next中有无短信验证码输入框和交易密码输入框组件

HarmonyOS鸿蒙Next中有无短信验证码输入框和交易密码输入框组件 有无短信验证码输入框和交易密码输入框组件

3 回复

参考以下代码:

@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)
  }
}

如果是唤起系统软键盘的输入数字,还有光标展示,参考以下demo: https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/verifycode,对于光标的问题建议验证码和密码输入组件不要显示光标

更多关于HarmonyOS鸿蒙Next中有无短信验证码输入框和交易密码输入框组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,提供了短信验证码输入框和交易密码输入框组件。这些组件是鸿蒙系统UI框架的一部分,开发者可以直接调用这些组件来实现短信验证码和交易密码的输入功能。

短信验证码输入框组件通常用于用户输入接收到的短信验证码,支持自动填充和验证码格式校验。交易密码输入框组件则用于用户输入交易密码,支持密码隐藏、显示切换和输入长度限制。

这些组件的使用方法和属性可以通过鸿蒙开发者文档进行查阅,开发者可以根据具体需求进行配置和定制。鸿蒙Next的UI组件库设计旨在简化开发流程,提升应用的用户体验。

在HarmonyOS鸿蒙Next中,确实提供了短信验证码输入框和交易密码输入框组件。这些组件通过TextInput控件实现,开发者可以通过设置不同的输入类型(如验证码或密码)来满足具体需求。短信验证码输入框通常为单行输入,而交易密码输入框则为掩码输入,确保安全性。这些组件支持自定义样式和事件处理,便于集成到应用中。

回到顶部