鸿蒙HarmonyOS应用开发-自定义实现验证码框_鸿蒙开发字母验证码(1)

最新推荐文章于 2024-08-19 22:34:36 发布

2401_84164527

最新推荐文章于 2024-08-19 22:34:36 发布

阅读量448

点赞数 3

分类专栏： 2024年程序员学习文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/2401_84164527/article/details/137691700

版权

2024年程序员学习专栏收录该内容

114 篇文章 1 订阅

订阅专栏

检查输入的值长度是否小于等于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<string> = 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<string>
   @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学习资料****

鸿蒙（Harmony NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

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

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》

ArkTS语言
安装DevEco Studio
运用你的第一个ArkTS应用
ArkUI声明式UI开发
.……

《鸿蒙开发进阶》

Stage模型入门
网络管理
数据管理
电话服务
分布式应用开发
通知与窗口管理
多媒体技术
安全技能
任务管理
WebGL
国际化开发
应用测试
DFX面向未来设计
鸿蒙系统移植和裁剪定制
……

《鸿蒙进阶实战》

ArkTS实践
UIAbility应用
网络案例
……

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数HarmonyOS鸿蒙开发工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上HarmonyOS鸿蒙开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新

如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注鸿蒙获取）

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

463)]
[外链图片转存中…(img-mtmEBZLS-1712920003463)]
[外链图片转存中…(img-9nKIDE2Z-1712920003464)]

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新

如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注鸿蒙获取）
[外链图片转存中…(img-O6dPsCHU-1712920003464)]

2401_84164527

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
鸿蒙HarmonyOS应用开发-自定义实现验证码框_鸿蒙开发字母验证码(1)

只需要稍微的封装下，将输入框的宽度、高度、圆角、颜色、输入类型、数量等包裹在一个对象中，使用@State修饰，并一一对应应用，即可将这个组件做成一个很标准的任意发挥的输入框啦。唯一的遗憾是，目前没法去除TextInput点击的样式，除非你是纯色（纯色变化看不出来…）@Preview@Componentbuild() {Stack() {= null) {Text(item)})})})//TODO 系统问题，如果背景色是透明的也没用，非透明可以。
复制链接

扫一扫