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

HarmonyOS鸿蒙Next开发：自定义一个动态输入框 前言

动态的输入框很是常见，比如支付宝或者微信，在你发红包或者转账输入密码的时候，当输入完上一个，自动就切换到了下一个，当然了除了支付密码的场景之外，很多验证码的输入也是通过这种方式实现的，可以说，用的场景很多。

在鸿蒙开发中，如何实现这一效果呢，最重要的解决两个问题，第一个问题是，如何在上一个输入框输入完之后，焦点切换至下一个输入框中，第二个问题是，如何禁止已经输入的输入框的焦点，两个问题解决完之后，其他的就很是简单了。

本篇的大纲如下：

1、实现效果一览 2、绘制输入框 3、如何切换焦点 4、如何禁止焦点 5、开源组件超简单使用 6、相关总结

一、实现效果一览

最终完成的是一个组件，可以在任意的地方进行使用，我简单的写了几个实现的效果，当然了可以根据属性，实现多种且不同的样式。

静态效果

动态效果

二、绘制输入框

输入框没什么好说的，就是使用的TextInput组件，实际的场景中，其输入框的数量肯定是动态的，所以这里使用的是Grid组件展示一行，使用Grid的一个便利之处，除了均分简单配置列之外，还有一点，是方便控制列与列之间的距离；当然了使用其他的组件也没问题的。

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

TextInput组件，除了正常的样式属性之外，我们需要监听输入内容的变化，通过onChange方法即可，在onChange方法中，我们需要做的是，存储每一个输入的内容，用于返回至业务层，当然了还需要判断，当前是否存在内容，如果存在，那么焦点就切换至下一个。

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

三、如何切换焦点

在绘制TextInput组件的时候，每个组件定义一个id，可以使用FocusController控制器，把焦点移动至下一个id的组件之上。

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

四、如何禁止焦点

在实际的开发中如果我们动态的取消焦点或者禁止点击等方式实现，会发现输入框确实不可点击，但是会出现软键盘收起再弹出的问题，那么为了解决多输入框使用同一个软键盘，这里我用到了一个浮层，也就是已经输入过的输入框使用透明的浮层覆盖，这样就无法触摸了。

五、开源组件超简单使用

以上呢只是实现的思路，通过这种思路，已经完成了输入框的动态输入，目前已经提交至了中心仓库，大家可以下载使用。

[https://ohpm.openharmony.cn/#/cn/detail/@abner%2Finput_box](https://ohpm.openharmony.cn/#/cn/detail/@abner%2Finput_box)

1、远程依赖

方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

建议：在使用的模块路径下进行执行命令。

ohpm install [@abner](/user/abner)/input_box

方式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：

"dependencies": { "[@abner](/user/abner)/input_box": "^1.0.0"}

2、代码使用

1、普通使用

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

2、光标颜色

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

3、边框模式

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

4、显示底部光标

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

5、圆点

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

6、星号

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

7、设置边框选择颜色

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

8、设置边框下划线方式

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

9、设置边框下划线圆点方式

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

六、相关总结

除了动态的把焦点切换至下一个之外，我们在点击软键盘删除的时候，也需要把输入框的内容清空以及切换焦点至上一个，如何监听软键盘的删除按钮，这个可费了一番功夫，执行onKeyEvent事件，发现只走电脑的按键，模拟器的软键盘不会走，以为是模拟器的问题，切换到真机上，删除按钮也不会走。最后不断地排查，发现了一个方法是必走的，那就是onWillDelete，大家在自己实现的时候，可以使用这个方法，可以少走弯路。