鸿蒙应用开发 仿京东短信验证码UI效果

整体思路：

外层Stack布局，里面TextInput组件用来调起键盘，Row布局中循环出四个Text组件，Row布局覆盖在TextInput组件上，用来展示输入的数字。

定义两个参数，code用来接受输入的文本，someArray用来做为想要展示的Text组件数量，其中的数字用来和code的长度做比较，来区分输入框是否写入文本。

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

这里循环someArray，Text组件未填入时显示 ‘-’并且即将写入数字的Text组件有橙色高亮，当四个输入框都有数字时，最后一个框高亮。

      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 {
            // 未填数字的输入框,显示'-',并且即将要输入的框为橙色