鸿蒙 验证码输入框_鸿蒙 arkui canvas验证码

@Entry
@Component
export struct TestPage {
  itemCount: number = 4
  isFocusable:boolean = false
  controller: TextInputController = new TextInputController()
  @State textList: Array<itemTextModel> = []

  aboutToAppear() {
    for (let i = 0; i < this.itemCount; i++) {
      this.textList.push(new itemTextModel("", i))
    }
  }

  build() {
    Column(){
      Row({ space: 20 }) {
        ForEach(this.textList, (item: itemTextModel, index: number) => {
          textItemUi({ item: item }) .onClick(()=>{
            console.log("aaa")
            focusControl.requestFocus("test_input")
          })
        }, (item: itemTextModel) => item.index + "")

      }.width("100%").height("100%").justifyContent(FlexAlign.Center)


      TextInput()
        .id("test_input")
        .width(0)
        .height(0)
        .maxLength(this.itemCount)
        .onChange((value: string) => {
          console.log("value====" + value)
          for (let i = 0; i < this.itemCount; i++) {
            if (value.length >= i) {
              this.textList[i].content = value.substring(i, i + 1)
            } else {
              this.textList[i].content = ""
            }
          }
        })


    }.width("100%").height("100%")





  }
}

@Component
struct textItemUi {
  @ObjectLink item: itemTextModel

  build() {
    Text(this.item.content)
      .textStyle()
  }
}


@Observed
class itemTextModel {
  content: string
  index: number

  constructor(msg: string, mIndex: number) {
    this.content = msg;
    this.index = mIndex;
  }
}

@Extend(Text)
function textStyle() {
  .width(50)
  .height(50)
  .textAlign(TextAlign.Center)
  .fontSize(25)
  .borderWidth(1)
  .borderColor(Color.Black)
}