鸿蒙HarmonyOS应用开发-自定义实现验证码框_harmonyos 怎么实现一次输入一个数字的短信验证码需要注意的是

需要注意的是，并不能使用focusable(true)来达到将焦点赋予给某个输入框的操作，移动焦点需要使用focusControl.requestFocus(),而requestFocus需要的参数是输入框的key，这里我们需要新增一个key：

@Preview @Component struct CodeInputView { // 用于存储用户输入的字符的数组，初始值为5个空字符串 @State codeKids: Array = new Array(5).fill('')

// 回调函数，用于传递输入结果给父组件 inputResultCallback: (string) => void

build() { // 创建一个横向排列的行，每个输入框之间有一定的间隔 Row({ space: vp(10) }) { ForEach(this.codeKids, (item: string, index: number) => { TextInput() .backgroundColor("#CCFFFFFF") // 设置文本输入框的背景颜色 .borderRadius(10) // 设置文本输入框的圆角 .maxLength(1) // 设置最大输入长度为1 .layoutWeight(1) // 设置布局权重 .fontSize(25) // 设置字体大小 .height("100%") // 设置高度为100% .type(InputType.Number) // 设置输入类型为数字 .align(Alignment.Center) // 设置文本居中对齐 .key(code${index}) // 为每个输入框设置唯一的键 .onChange((value) => { if (value.length <= 1) { this.codeKids[index] = value // 存储用户输入的字符 } if (index - 1 < this.codeKids.length) { let nextIndex = index + 1 // 将焦点自动移动到下一个输入框 focusControl.requestFocus(code${nextIndex}) } else { // 触发验证码完成回调函数 this.inputResultCallback(this.codeKids.join("")) } }) }, (item: string) => item) } .backgroundColor(Color.Black) // 设置整个行的背景颜色为黑色 .height(80) // 设置行的高度为80 } }

在新的代码中：

1. inputResultCallback属性：新增了一个名为 inputResultCallback 的属性，用于在用户完成输入后将结果传递给父组件。

2. TextInput的onChange事件：在每个 TextInput 组件中添加了 onChange 事件处理程序。当用户输入内容时，这个事件处理程序会被触发。在事件处理程序内部，会进行以下操作：

检查输入的值长度是否小于等于1，如果是则将该值存储在 codeKids 数组的相应位置上，以保证每个输入框只能输入一个字符。
检查是否还有下一个输入框（index + 1 是否小于 codeKids 数组的长度）。如果有下一个输入框，将焦点自动移动到下一个输入框，以方便用户连续输入。
如果没有下一个输入框，触发 inputResultCallback 回调函数，将输入的值传递给父组件或其他调用者。

3. key属性：为每个 TextInput 组件添加了 key 属性，以确保focusControl.requestFocus的正确触发，这里我们使用了 index 来生成唯一的键。

奇怪的问题

输入框没有焦点

第一次初始化的时候并没有获取焦点，系统也不知道焦点给谁。

我们只需要在TextInput中加入：

.defaultFocus(index == 0)

删除onChange方法并不会触发

整个流程都已经完成了，包括删除验证码！

if (value.length <= 1) { this.codeKids[index] = value }

这段代码赋予了当被删除的时候，数组中的值也会正确的改变。但是！

令人奇怪的是，在当前版本中当进行删除操作的时候，onChange方法并不会触发（平板、模拟器、手机均不会），所以我们需要另寻它法。

监听onKeyEvent！

.onKeyEvent((event)=>{ if (event.keyCode == KeyCode.KEYCODE_DEL) {

} })

事实上，想法是美好的，这个方法也不会触发（模拟器、平板不触发、手机触发异常）

软键盘显示异常

focusControl.requestFocus(nextKeyStr)

使用requestFocus的确可以将焦点切换到下一个输入框，但是软键盘确收起来了！

在这里我试了很多种办法。都没法做到尽善尽美。

多方查证，也觉得TextInput来做这个应该是不可行的，只能等官方下场修复。

那怎么办呢？

反过来想 Text() + TextInput()

如果多个输入框有问题，那么我用一个输入框不就行了？于是我就想到了使用多个Text(),一个TextInput的方案。

多个Text()用于排列显示，TextInput用于处理输入。

只要显示正常，感知正常，那就没人知道怎么输入进去的~

@Preview @Component struct CodeInputView { // 用于存储用户输入的字符的数组，初始值为5个空字符串 @State codeKids: Array = new Array(5).fill('')

// 回调函数，用于传递输入结果给父组件 inputResultCallback: (string) => void

build() { // 使用 Stack 布局组织界面元素 Stack() { if (this.codeKids != null) { // 创建一个横向排列的行，每个字符之间有一定的间隔 Row({ space: vp(10) }) { // 使用 ForEach 循环遍历 codeKids 数组 ForEach(this.codeKids, (item: string, index: number) => { // 显示用户输入的字符 Text(item) .backgroundColor($r('app.color.white_80')) // 设置背景颜色 .height(match()) // 设置高度匹配内容 .layoutWeight(1) // 设置布局权重 .fontSize(fp(25)) // 设置字体大小 .textAlign(TextAlign.Center) // 设置文本水平居中对齐 .align(Alignment.Center) // 设置垂直居中对齐 .borderRadius(vp(15)) // 设置圆角 .focusable(false) // 不可获得焦点 .defaultFocus(false) // 默认不获得焦点 .focusOnTouch(false) // 不在触摸时获得焦点 }, (item: string) => item) } .height(match()) // 设置行的高度匹配内容 .width(match()) // 设置行的宽度匹配内容

// 创建一个输入框用于用户输入 TextInput() .maxLength(this.viewSize) // 设置最大输入长度 .fontSize(fp(25)) // 设置字体大小 .borderRadius(vp(15)) // 设置圆角 .type(InputType.Number) // 设置输入类型为数字 .key(this.inputKey) // 设置唯一的键 .onChange((value) => { // 将输入的字符拆分并分别显示在 Text 组件中 let a = value.split('') this.codeKids.forEach((value, index) => { this.codeKids[index] = a[index] || '' }) if (a.length >= this.viewSize) { // 当达到验证码长度时，触发回调函数传递输入结果 this.inputResultCallback(value) } // 控制光标显示/隐藏 this.showCaret = (a.length == 0) }) .copyOption(CopyOptions.None) // 禁用复制操作 .caretColor(this.showCaret ? Color.Black : Color.Transparent) // 设置光标颜色 .fontColor(Color.Transparent) // 设置文本颜色为透明 .backgroundColor(Color.Transparent) // 设置背景颜色为透明 .height(match()) // 设置高度匹配内容 .width(match()) // 设置宽度匹配内容 } } .height(vp(80)) // 设置整个 Stack 的高度 } }

TextInput填充布局，置于顶层。文字和背景设置为透明，隐藏光标。

.copyOption(CopyOptions.None) // 禁用复制操作 .caretColor(Color.Transparent) // 设置光标为透明 .fontColor(Color.Transparent) // 设置文本颜色为透明 .backgroundColor(Color.Transparent) // 设置背景颜色为透明

添加对应数量的Text，用作显示验证码。这一步其实就是将之前的ForEach中添加的TextInput换为Text即可.
在onChange中分隔字符串，并存入对应下标的数组中。

// 将输入的字符拆分并分别显示在 Text 组件中 let a = value.split('') this.codeKids.forEach((value, index) => { this.codeKids[index] = a[index] || '' }) if (a.length >= this.viewSize) { // 当达到验证码长度时，触发回调函数传递输入结果 this.inputResultCallback(value) }

使用也很简单：

CodeInputView({inputResultCallback: (code) => { //做点什么 })

最终效果如下：

最后

只需要稍微的封装下，将输入框的宽度、高度、圆角、颜色、输入类型、数量等包裹在一个对象中，使用@State修饰，并一一对应应用，即可将这个组件做成一个很标准的任意发挥的输入框啦。

唯一的遗憾是，目前没法去除TextInput点击的样式，除非你是纯色（纯色变化看不出来....）

以下就是该例子代码啦：

@Preview @Component export struct CodeInputView { @State viewSize: number = 4 inputResultCallback: (string) => void @Link codeKids: Array @State showCaret: boolean = true private inputKey = "code_input"

aboutToAppear() { if (this.codeKids == null) { this.codeKids = new Array(this.viewSize).fill(''); } }

build() { Stack() { if (this.codeKids != null) { Row({ space: vp(10) }) { ForEach(this.codeKids, (item: string, index: number) => { Text(item) .backgroundColor($r('app.color.white_80')) .height(match()) .layoutWeight(1) .fontSize(fp(25)) .textAlign(TextAlign.Center) .align(Alignment.Center) .borderRadius(vp(15)) .focusable(false) .defaultFocus(false) .focusOnTouch(false) .onClick(() => { focusControl.requestFocus(this.inputKey) }) }, (item: string) => item) } .height(match()) .width(match())

TextInput() .maxLength(this.viewSize) .fontSize(fp(25)) .borderRadius(vp(15)) .type(InputType.Number) .key(this.inputKey) .onChange((value) => { let a = value.split('') this.codeKids.forEach((value, index) => { this.codeKids[index] = a[index] || '' }) if (a.length >= this.viewSize) { this.inputResultCallback(value) } this.showCaret = (a.length == 0) }) .copyOption(CopyOptions.None) .caretColor(this.showCaret ? Color.Black : Color.Transparent) .fontColor(Color.Transparent) .backgroundColor(Color.Transparent) //TODO 系统问题，如果背景色是透明的也没用，非透明可以 // .stateStyles({ pressed: {.backgroundColor("跟背景一样的颜色（纯透明会黑色闪一下）")}}) .height(match()) .width(match()) } } .height(vp(80)) } }

小结

这个需求大概就告一段了，如果各位有什么想加的功能啥的，可以在评论区告知哦。

总之，HarmonyOS ArkUI的文档还是太少了，很多API都需要摸索，很多写法、操作都不习惯。以及很多坑！，Android的思维不适用在HarmonyOS。希望能跟上这个变化吧。阿弥陀佛。

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）**技术知识点。

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料****