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

最新推荐文章于 2024-04-16 05:22:04 发布

JVM虚拟机资料

最新推荐文章于 2024-04-16 05:22:04 发布

阅读量810

点赞数 22

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

本文链接：https://blog.csdn.net/m0_57540801/article/details/137635088

版权

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

229 篇文章 0 订阅

订阅专栏

.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学习资料****

鸿蒙（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应用
网络案例
……

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

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。

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

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

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

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

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

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

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

小伙伴深入学习提升的进阶课程，基本涵盖了95%以上HarmonyOS鸿蒙开发知识点，真正体系化！**

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

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

JVM虚拟机资料

关注

22
点赞
踩
12

收藏

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

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

扫一扫