HarmonyOS一杯冰美式的时间 -- 验证码框

2024-02-17 13:36
文章标签 时间 验证码 美式 一杯 harmonyos

本文主要是介绍HarmonyOS一杯冰美式的时间 -- 验证码框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、前言

像是短密码、验证码都有可能需要一个输入框，像是如下：

恰好在写HarmonyOS的时候也需要写一个验证码输入框，但是在实现的时候碰了几次灰，觉得有必要分享下，故有了此篇文章。

如果您有任何疑问、对文章写的不满意、发现错误或者有更好的方法，欢迎在评论、私信或邮件中提出，非常感谢您的支持。🙏 PS：二三为错误示例，如果你只想要代码，在四开始

二、ForEach + TextInput

一开始直接上手就是使用Android的老方案，使用多个EditText，只需要切换焦点即可。在HarmonyOS中对应的就是TextInput。因为需要数个相同的输入框，我们先写一个通用的输入框。

 @Componentstruct CodeInputView {build() {TextInput().backgroundColor("#CCFFFFFF").borderRadius(10).maxLength(1).type(InputType.Number).align(Alignment.Center)}}

如果一个个去添加输入框，太麻烦了，如果有改动也很头大，所以我们可以塞到一个父布局中，使用ForEach来添加。因为这种情形的输入一般是横向的，使用Row是一个很好的主意，所以变成了“在Row中使用ForEach添加若干个TextInput”，我们稍微修改下：

 @Preview@Componentstruct CodeInputView {// 创建一个包含5个空字符串的数组，用于存储输入的数字@State codeKids: Array<string> = new Array(5).fill('')​// 构建界面build() {Row({ space: 10 }) {ForEach(this.codeKids, (item: string, index: number) => {TextInput(this.codeKids[index]).backgroundColor("#CCFFFFFF") // 设置文本输入框的背景颜色.borderRadius(10) // 设置文本输入框的圆角.maxLength(1) // 设置最大输入长度为1.layoutWeight(1) // 设置布局权重.fontSize(25) // 设置字体大小.height("100%") // 设置高度为100%.type(InputType.Number) // 设置输入类型为数字.align(Alignment.Center) // 设置文本居中对齐}, (item: string) => item)}.backgroundColor(Color.Black) // 设置整个行的背景颜色为黑色，方便preview.height(80) // 设置行的高度为80}}

如果我们逐个手动添加输入框，会显得非常繁琐，而且如果需要进行修改的话也会变得很复杂。

因此，我们可以将这些输入框放置在一个父布局中，然后使用 ForEach 函数来动态添加它们。由于这种情况下输入框通常是水平排列的，所以使用 Row 组件是一个明智的选择。因此，我们将代码改成了 ‘在 Row 中使用 ForEach 动态添加多个 TextInput’ 的方式。

我们新增了一个名为 codeKids 的数组，并用空字符进行了填充，并使用 @State 注解来修饰它。在 Row 的 ForEach 中，我们直接使用 codeKids 作为数据源，这样输入框的数量会根据 codeKids 数组的长度而变化，而 codeKids 的大小就代表了验证码的长度。

而 layoutWeight(1) 和 { space: 10 } 这两个组合参数，实现了等宽和等间距的效果。

通过@Preview，我们已经能看到效果了。

接下来我们需要它动起来，也就是"输入一个切换到下一个输入框，最后一个返回完整的验证码"。

这里显然需要我们使用onChange方法监听字符的输入。

分解一下

  1. 监听每个 TextInput 的 onChange 事件，当用户输入字符后，将字符存入相应位置的 codeKids 数组，并移动焦点到下一个 TextInput。
  2. 在最后一个输入框中，当用户输入字符后，将字符存入 codeKids 数组，并触发验证码完成的操作。

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

 @Preview@Componentstruct CodeInputView {// 用于存储用户输入的字符的数组，初始值为5个空字符串@State codeKids: Array<string> = 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 来生成唯一的键。

三、奇怪的问题

  1. 输入框没有焦点

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

    我们只需要在TextInput中加入

 .defaultFocus(index == 0)

  1. 删除onChange方法并不会触发

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

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

这段代码赋予了当被删除的时候，数组中的值也会正确的改变。但是！令人奇怪的是，在当前版本中当进行删除操作的时候，onChange方法并不会触发（平板、模拟器、手机均不会），所以我们需要另寻它法。监听onKeyEvent！

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

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

  1. 软键盘显示异常
 focusControl.requestFocus(nextKeyStr)

使用requestFocus的确可以将焦点切换到下一个输入框，但是软键盘确收起来了！在这里我试了很多种办法。都没法做到尽善尽美。多方查证，也觉得TextInput来做这个应该是不可行的，只能等官方下场修复。那怎么办呢？

四、反过来想 Text() + TextInput()

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

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

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

 @Preview@Componentstruct 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 的高度}}
  1. TextInput填充布局，置于顶层。文字和背景设置为透明，隐藏光标
 .copyOption(CopyOptions.None) // 禁用复制操作.caretColor(Color.Transparent) // 设置光标为透明.fontColor(Color.Transparent) // 设置文本颜色为透明.backgroundColor(Color.Transparent) // 设置背景颜色为透明

  1. 添加对应数量的Text，用作显示验证码。这一步其实就是将之前的ForEach中添加的TextInput换为Text即可

  2. 在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@Componentexport struct CodeInputView {@State viewSize: number = 4inputResultCallback: (string) => void@Link codeKids: Array<string>@State showCaret: boolean = trueprivate 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。

为了能让大家更好的学习鸿蒙 (OpenHarmony) 开发技术，这边特意整理了《鸿蒙 (OpenHarmony)开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙 (OpenHarmony)开发学习手册》

入门必看：https://qr21.cn/FV7h05

  1. 应用开发导读(ArkTS)
  2. ……

HarmonyOS 概念：https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

如何快速入门？：https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. 构建第一个JS应用
  4. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

这篇关于HarmonyOS一杯冰美式的时间 -- 验证码框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/717928。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
服务器集群同步时间手记

服务器集群同步时间手记

1.时间服务器配置（必须root用户） （1）检查ntp是否安装 [root@node1 桌面]# rpm -qa|grep ntpntp-4.2.6p5-10.el6.centos.x86_64fontpackages-filesystem-1.41-1.1.el6.noarchntpdate-4.2.6p5-10.el6.centos.x86_64 （2）修改ntp配置文件 [r
阅读更多...
MiniGPT-3D, 首个高效的3D点云大语言模型，仅需一张RTX3090显卡，训练一天时间，已开源

MiniGPT-3D, 首个高效的3D点云大语言模型，仅需一张RTX3090显卡，训练一天时间，已开源

项目主页：https://tangyuan96.github.io/minigpt_3d_project_page/ 代码：https://github.com/TangYuan96/MiniGPT-3D 论文：https://arxiv.org/pdf/2405.01413 MiniGPT-3D在多个任务上取得了SoTA，被ACM MM2024接收，只拥有47.8M的可训练参数，在一张RTX
阅读更多...
Spring 验证码（kaptcha）

Spring 验证码（kaptcha）

首先引入需要的jar包： <dependency><groupId>com.github.axet</groupId><artifactId>kaptcha</artifactId><version>0.0.9</version></dependency> 配置验证码相关设置： <bean id="captchaProducer" class="com.
阅读更多...
批处理以当前时间为文件名创建文件

批处理以当前时间为文件名创建文件

批处理以当前时间为文件名创建文件 批处理创建空文件 有时候，需要创建以当前时间命名的文件，手动输入当然可以，但是有更省心的方法吗？ 假设我是 windows 操作系统，打开命令行。 输入以下命令试试： echo %date:~0,4%_%date:~5,2%_%date:~8,2%_%time:~0,2%_%time:~3,2%_%time:~6,2% 输出类似： 2019_06
阅读更多...
【MRI基础】TR 和 TE 时间概念

【MRI基础】TR 和 TE 时间概念

重复时间 (TR) 磁共振成像 (MRI) 中的 TR（重复时间，repetition time）是施加于同一切片的连续脉冲序列之间的时间间隔。具体而言，TR 是施加一个 RF（射频）脉冲与施加下一个 RF 脉冲之间的持续时间。TR 以毫秒 (ms) 为单位，主要控制后续脉冲之前的纵向弛豫程度（T1 弛豫），使其成为显著影响 MRI 中的图像对比度和信号特性的重要参数。 回声时间 (TE)
阅读更多...
LeetCode：64. 最大正方形 动态规划 时间复杂度O(nm)

LeetCode：64. 最大正方形 动态规划 时间复杂度O(nm)

64. 最大正方形 题目链接 题目描述 给定一个由 0 和 1 组成的二维矩阵，找出只包含 1 的最大正方形，并返回其面积。 示例1: 输入: 1 0 1 0 01 0 1 1 11 1 1 1 11 0 0 1 0输出: 4 示例2: 输入: 0 1 1 0 01 1 1 1 11 1 1 1 11 1 1 1 1输出: 9 解题思路 这道题的思路是使用动态规划
阅读更多...
O(n)时间内对[0..n^-1]之间的n个数排序

O(n)时间内对[0..n^-1]之间的n个数排序

题目 如何在O(n)时间内，对0到n^2-1之间的n个整数进行排序 思路 把整数转换为n进制再排序，每个数有两位，每位的取值范围是[0..n-1]，再进行基数排序 代码 #include <iostream>#include <cmath>using namespace std;int n, radix, length_A, digit = 2;void Print(int *A,
阅读更多...
LeetCode:3177. 求出最长好子序列 II 哈希表+动态规划实现n*k时间复杂度

LeetCode:3177. 求出最长好子序列 II 哈希表+动态规划实现n*k时间复杂度

3177. 求出最长好子序列 II 题目链接 题目描述 给你一个整数数组 nums 和一个非负整数k 。如果一个整数序列 seq 满足在下标范围 [0, seq.length - 2] 中 最多只有 k 个下标i满足 seq[i] != seq[i + 1] ，那么我们称这个整数序列为好序列。请你返回 nums中好子序列的最长长度。 实例1: 输入：nums = [1,2,1,1,3],
阅读更多...
【HarmonyOS】-TaskPool和Worker的对比实践

【HarmonyOS】-TaskPool和Worker的对比实践

ArkTS提供了TaskPool与Worker两种多线程并发方案，下面我们将从其工作原理、使用效果对比两种方案的差异，进而选择适用于ArkTS图片编辑场景的并发方案。 TaskPool与Worker工作原理 TaskPool与Worker两种多线程并发能力均是基于 Actor并发模型实现的。Worker主、子线程通过收发消息进行通信；TaskPool基于Worker做了更多场景化的功能封装，例
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2