鸿蒙开发：自定义一个动态输入框

Grid() {
      ForEach(this.inputBoxArray, (_: number, index: number) => {
        GridItem() {
          TextInput()
        }
      })
    }.columnsTemplate("1fr ".repeat(this.inputBoxSize).trimEnd())
    .rowsTemplate("1fr")

if (value != undefined && value != "" && index < this.inputBoxSize) {
                  this.inputBoxTextArray[this.lastPosition] = value //赋值内容
                  this.inputBoxVisibilityArray[this.lastPosition] = false
                  if (index != this.inputBoxSize - 1) {
                    this.lastPosition = index + 1
                    this.inputBoxVisibilityArray[this.lastPosition] = true
                    this.moveFocus(this.lastPosition)
                  } else {
                    this.inputBoxVisibilityArray[this.lastPosition] = false
                  }
                }

/**
   * AUTHOR:AbnerMing
   * INTRODUCE:移动焦点
   * */
  private moveFocus(index: number) {
    this.getUIContext().getFocusController().requestFocus(this.inputViewIds + index)
  }

InputBoxView({
  inputBoxSize: 5,
  onChange: (value) => {
    console.log("===输入监听：" + value)
  },
  onInputEnd: (value) => {
    console.log("===输入结果：" + value)
  }
})

InputBoxView({
  inputBoxSize: 6,
  caretColor: Color.Red,
  onChange: (value) => {
    console.log("===输入监听：" + value)
  },
  onInputEnd: (value) => {
    console.log("===输入结果：" + value)
  }
})

InputBoxView({
  inputBoxSize: 6,
  caretColor: Color.Red,
  inputBoxBgColor: Color.Transparent,
  inputBoxBorderWidth: 1,
  isInputBoxBorder: true,
  inputBoxNormalBorderColor: Color.Black,
  inputBoxSelectBorderColor: Color.Red,
  onChange: (value) => {
    console.log("===输入监听：" + value)
  },
  onInputEnd: (value) => {
    console.log("===输入结果：" + value)
  }
})

InputBoxView({
  inputBoxSize: 6,
  caretColor: Color.Red,
  inputBoxBgColor: Color.Transparent,
  inputBoxBorderWidth: 1,
  isInputBoxBorder: true,
  isShowBottomCaret: true, //显示底部光标
  inputBoxNormalBorderColor: Color.Black,
  inputBoxSelectBorderColor: Color.Red,
  onChange: (value) => {
    console.log("===输入监听：" + value)
  },
  onInputEnd: (value) => {
    console.log("===输入结果：" + value)
  }
})

InputBoxView({
  inputBoxSize: 6,
  inputTextType: InputTextType.ROUND,
  onChange: (value) => {
    console.log("===输入监听：" + value)
  },
  onInputEnd: (value) => {
    console.log("===输入结果：" + value)
  }
})

InputBoxView({
  inputBoxSize: 6,
  inputTextType: InputTextType.ASTERISK,
  onChange: (value) => {
    console.log("===输入监听：" + value)
  },
  onInputEnd: (value) => {
    console.log("===输入结果：" + value)
  }
})

InputBoxView({
  inputBoxSize: 6,
  inputBoxNormalBorderColor: "#e8e8e8",
  inputBoxSelectBorderColor: Color.Blue,
  inputBoxBorderWidth: 1,
  boxInputHideBgColor: true,
  onChange: (value) => {
    console.log("===输入监听：" + value)
  },
  onInputEnd: (value) => {
    console.log("===输入结果：" + value)
  }
})

InputBoxView({
  inputBoxSize: 6,
  inputBoxBgColor: Color.Transparent,
  inputBoxBorderWidth: { bottom: 2 },
  inputBoxNormalBorderColor: Color.Black,
  inputBoxSelectBorderColor: Color.Black,
  onChange: (value) => {
    console.log("===输入监听：" + value)
  },
  onInputEnd: (value) => {
    console.log("===输入结果：" + value)
  }
})

InputBoxView({
  inputBoxSize: 6,
  inputTextType: InputTextType.ROUND,
  inputBoxBgColor: Color.Transparent,
  inputBoxBorderWidth: { bottom: 2 },
  inputBoxNormalBorderColor: Color.Black,
  inputBoxSelectBorderColor: Color.Black,
  onChange: (value) => {
    console.log("===输入监听：" + value)
  },
  onInputEnd: (value) => {
    console.log("===输入结果：" + value)
  }
})