Imitation of JD SMS verification code UI effect-HarmonyOS

[Lxy-Mango]

Select Topic Area

Show & Tell

Body

Overall idea:

The outer stack layout includes the TextInput component used to start the keyboard, and the Row layout loops out four Text components, which are overlaid on top of the TextInput component to display the input numbers.

Define two parameters, code is used to accept input text, someArray is used as the number of Text components to be displayed, and the numbers in it are compared with the length of the code to distinguish whether the input box is written with text.

  @State code: string = ''
  someArray: number[] = [1, 2, 3, 4]

Here we loop through someArray. When the Text component is not filled in, it displays a '-' and the Text component that is about to write a number is highlighted in orange. When all four input boxes have numbers, the last box is highlighted.

      Row() {
        ForEach(this.someArray, (item: number, index: number) => {
          if (item != 1) {
            Blank() // 除了第一个TextView自定义组件以外,其他三个的左边都添加一个Blank()组件
          }
          if (this.code.length >= item) {
            // 填过数字的输入框才满足这个条件, 且只有填到最后一个数字的时候isBorder才为true
            this.codeOne({ code: this.code.substring(item - 1, item), isBorder: item == 4 })
          } else {
            // 未填数字的输入框,显示'-',并且即将要输入的框为橙色
            this.codeOne({ code: '-', isBorder: this.code.length + 1 == item })
          }
        }, (item: number) => JSON.stringify(item))
      }
      .hitTestBehavior(HitTestMode.Transparent)
      .zIndex(2)
      .padding({ left: 16, right: 16 })
      .width('100%')

  @Builder
  codeOne($$: SMSInfo) {
    Text($$.code)
      .textAlign(TextAlign.Center)
      .width(60)
      .height(60)
      .border({ radius: 11, width: 3 })
      .borderColor($$.isBorder ? '#FF5500' : Color.Transparent)
      .backgroundColor('#F3F5F7')
  }

Difficulty: Event transparency is required. Set. hitTestBehavior (HitTestMode. Transparent) on the Row layout, so that both the self and child nodes respond to touch testing without blocking the touch testing of sibling nodes. It will not affect the touch testing of ancestral nodes.

Complete code:

import { promptAction } from "@kit.ArkUI"

@Entry
@Component
export struct SMSCaptchaPage {
  @State code: string = ''
  someArray: number[] = [1, 2, 3, 4]

  build() {
    Stack() {
      Row() {
        ForEach(this.someArray, (item: number, index: number) => {
          if (item != 1) {
            Blank() // 除了第一个TextView自定义组件以外,其他三个的左边都添加一个Blank()组件
          }
          if (this.code.length >= item) {
            // 填过数字的输入框才满足这个条件, 且只有填到最后一个数字的时候isBorder才为true
            this.codeOne({ code: this.code.substring(item - 1, item), isBorder: item == 4 })
          } else {
            // 未填数字的输入框,显示'-',并且即将要输入的框为橙色
            this.codeOne({ code: '-', isBorder: this.code.length + 1 == item })
          }
        }, (item: number) => JSON.stringify(item))
      }
      .hitTestBehavior(HitTestMode.Transparent)
      .zIndex(2)
      .padding({ left: 16, right: 16 })
      .width('100%')

      TextInput()
        .width('100%')
        .height(50)
        .maxLength(4)
        .type(InputType.Number)
        .backgroundColor(Color.Transparent)
        .onChange((value: string) => {
          this.code = value // 输入的内容改变时, 实时的传给code
          if (value.length == 4) {
            promptAction.showToast({ message: '验证码输入成功,等待验证' })
          }
        })
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  codeOne($$: SMSInfo) {
    Text($$.code)
      .textAlign(TextAlign.Center)
      .width(60)
      .height(60)
      .border({ radius: 11, width: 3 })
      .borderColor($$.isBorder ? '#FF5500' : Color.Transparent)
      .backgroundColor('#F3F5F7')
  }
}

class SMSInfo {
  code: string = ''
  isBorder: boolean = false
}

[taki-on]

@Lxy-Mango maybe you have accidentally posted it in a wrong thread?