鸿蒙-验证码输入框的几种实现方式-上

news/2025/2/22 15:06:24

文章目录

    • 效果图、优缺点
        • 多TextInput
        • 多 Text
        • Canvas 绘制
    • 多个 TextInput 拼接
      • 放置四个输入框
      • 焦点移动
        • 输入时向后移动
        • 输入完成回调
        • 删除时向前移动
      • 防止点击
      • 总结

最近在做应用鸿蒙化，说白了就是把原来Android、iOS的代码重新用ArkTS写一遍，我负责基础建设和登录模块，有个验证码输入框需要定制一下外观样式。这里详细记录一下探索过程及结果，以及思路和源码。这里给出了三种方案
一：多个 InputText 拼接，每个 InputText 只能输入 1 个字符，代码控制焦点移动，
二：多个 Text 拼接，通过系统apiinputMethod.InputMethodController控制键盘弹起并记录输入内容，刷新到 Text 中展示
三：使用 Canvas 自己绘制。
由于篇幅较长，这个拆成两篇来介绍。本篇介绍前两种方式，也是最常见的方式。使用Canvas 自己绘制纯粹就是闲着写的东西，后面再介绍。

效果图、优缺点

先放一下效果图

多TextInput

优点：只需要控制焦点就好，键盘的弹起、收起以及输入的内容我们不需要自己去监听，并且除了边框颜色之外，输入框内会有光标闪烁，也能给用户更强一些的提示
缺点：需要控制没有获取到焦点的输入框不能点击、不能长按等。尝试多种方案(设置 enable、focusable 等)均失败后，决定在输入框上面覆盖一个空白透明且大小和输入框相等的 Text 解决这个问题。有其他方案可以告诉我一下

多 Text

优点：不用控制焦点，只需要使用变量控制一下样式就好
缺点：需要自己记录键盘输入的文字，并且没有光标闪烁，当前也可以自己搞个 gif 图或者写个动画来模拟光标

Canvas 绘制

优点：我真的没想到有啥优点，可以自由的绘制边框、底色也算么？但现在的 pai 中有各种各样的Modifier来修改各种属性，实现自己绘制
缺点：全都得自己画，挺麻烦的

多个 TextInput 拼接

这里用四位验证码做例子：
思路挺简单的，四个TextInput并排放一块，输入框限制输入 1 个字符，用Flex做父控件也行，用Row做父控件也行,无所谓，这不是重点。
组件刚出现时，使用getUIContext().getFocusController().requestFocus(key:string)将焦点放在第一个输入框上，键盘就可以弹出来
监听TextInput的onDidDelete和onChange或者onDidInsert事件，来判断下一个焦点放在哪个位置
当最后一个TextInput有输入字符时，认为输入完成，进行回调。

下面详细介绍一下每一步怎么做的，以及对应的想法

放置四个输入框

当前获取到焦点的输入框颜色要明亮一些，没有焦点的输入框颜色要暗淡一些。我们使用@Extend()做一个公用样式，传入当前是否是焦点控件来控制边框颜色

@Extend(TextInput)
function textInputStyle(enable:boolean){
  .border({
    width: 1,
    color: enable?"#1b91e0":"#999999",
    radius: 4,
    style: BorderStyle.Solid,
  }).textAlign(TextAlign.Center)
  .layoutWeight(1)
  .maxLength(1)
  .maxLines(1)
  .type(InputType.Number)
  .layoutWeight(1).height(40)
}

为了在焦点变化的时候输入框背景能同步修改，这里用一个@State修饰的布尔数组表示哪个输入框获取焦点。同时为了省事，也定义了另外一个数组，方便使用 ForEach循环渲染。定义另外一个字符串数组来记录每个输入框的内容

@State inputValue: string[] = ["", "", "", ""]// 输入框的内容
@State inputEnable: boolean[] = [true, false, false, false] //输入框是否获取焦点
inputIndex: number[] = [0, 1, 2, 3] //ForEach渲染用
  build() {
    Row() {//这里用 Flex 更方便一些，直接设置间距就好，不用这样设置 margin 了
      ForEach(this.inputIndex, (index: number) => {
        TextInput({ text: this.inputValue[index] })
          .id(index.toString())//这里 id 是给FocusController使用
          .margin({ right: index == this.inputIndex.length - 1 ? 0 : 10 })
          .textInputStyle(this.inputEnable[index])
      })
    }
  }

这样我们就画出来了最基本的布局。但我们会发现进入页面后键盘不能自己弹出来，因为输入框没有获取到焦点。
这里有两个方案，一个是给其中TextInput设置defaultFocus为 true，或者在页面展示的时候设置焦点

TextInput({ text: this.inputValue[index] }).defaultFocus(this.inputEnable[index])
//或者
Row(){}.onAppear(()=>{this.getUIContext().getFocusController().requestFocus("0")})

注意这里requestFocus()方法传入的参数"0",也就是上面TextInput的id的值.
这样我们就做好的基本的属性，并且页面显示的时候也可以弹出键盘了。

在这里插入图片描述

焦点移动

输入时向后移动

但是这时候我们点击键盘输入的时候，发现光标并不会自动移动到下一个输入框上继续输入。这里需要我们进行控制。这个也比较简单，TextInput有一个输入内容发生变化时，触发的回调：onChange(callback: EditableTextOnChangeCallback)。我们可以在这个方法里面移动焦点

TextInput().onChange((value: string, previewText?: PreviewText) => {
this.inputValue[index] = value //记录输入的内容
if (value.length == 1) { //确认是输入而不是删除
    if (index != 3) {//如果不是最后一个输入框发生的输入事件，就把焦点交给下一个输入框
    this.inputEnable[index+1] = true//记录下一个输入框获取焦点，改变背景色
    this.getUIContext().getFocusController().requestFocus((index + 1).toString())//下一个输入框获取焦点
    this.inputEnable[index] = false//标记当前输入框失去焦点，改变背景色
    } else {//如果是最后一个输入框发生的输入事件，表示已经输入完了，继续后面流程
    //todo 输入完成，继续后面流程
    }
}
})
输入完成回调

这就很简单了，定义一个函数变量，接收父布局传进来的函数，输入完成时回调这个函数就好

onFinishInput?: (value: string) => void  //函数变量
//输入完成，进行回调
if (this.onFinishInput) {//判断一下空值，然后把保存的值拼接成字符串回调
    let result = ""
    for (let i = 0; i < this.inputValue.length; i++) {
        result += this.inputValue[i]
    }
    this.onFinishInput(result)
}

到这里，我们已经实现了大部分功能：输入字符、保存字符、焦点向后移动、输入完成时回调。
下面要解决的就是删除

删除时向前移动

这里需要注意一下：
如果当前输入框有内容，点击删除时删除当前输入框内容，焦点不动：仅在最后一个输入框会有这个情况
如果当前输入框没有内容，则删除上一个输入框内容，焦点移动到上一个输入框
如果当前时第一个输入框，不做处理

刚开始想着在onChange事件中做处理，但当输入框中没有内容时，点击删除的时是没有回调的。怎么搞，翻翻文档，找到了onWillDelete和onDidDelete,并且这两个回调都是发生在onChange之前。
这里我选择了onDidDelete事件中处理，逻辑就是上面说的那样

TextInput().onDidDelete((_) => {
  
  if (this.inputValue[index].length == 0) {
    //不是第一个输入框 且 输入框内没有文字，则删除上一个输入框内容，并且使上一个输入框获取焦点
    if (index != 0) {
      this.inputValue[index-1] = ""
      this.inputEnable[index] = false
      this.inputEnable[index-1] = true

      this.getUIContext().getFocusController().requestFocus((index - 1).toString())
    } else {
      //如果输入框内有文字，则只删除当前输入框内容
      this.inputValue[index] = ""
    }
  }
})

到这里我们就完成了大部分的工作，一个可以正常工作，随便调整背景的验证码输入框就完成了。
但似乎还有一点问题，当点击非当前焦点的输入框时，光标会移动到点击的输入框中。这就不太好了

防止点击

一开始想法很简单，我们不是有个布尔类型数组保存着当前哪个输入框获取焦点么？没有焦点的输入框设置enable为false就可以了哇，移动焦点的时候先将目标输入框设置enable为true，然后再移动焦点就好了哇。
那就给输入框加上这个设置就好了哇

TextInput().enabled(this.inputEnable[index])

我们在上面的代码中，都是先修改inputEnable数组值，然后再设置焦点，完美。
运行一下，页面出现时弹出键盘，除了第一个输入框其他输入框点击都没有反映，很好。
试着输入一下，崩了。。。。
日志提示组件不存在或者时不可用状态

Error message:The component doesn't exist, is currently invisible, or has been disabled.

难道是因为在请求焦点的时候，输入框的属性还没来得及完成修改？
做个测试，延迟1s设置焦点，果然是可以的。但这种效果太难受了，键盘会先收起来再弹出来。缩短延迟时间也很难把握时长。那就再翻翻api，找找下一帧之类的回调。
还真有，在UIContext这个类中有一个函数postFrameCallback:注册一个在下一帧进行渲染时执行的回调。按照示例把代码撸好，编译运行，尝试输入，又又又崩了，错误信息也一样。
没办法了么？只能用延迟么？太难受了哇，来个曲线救国，我们搞个透明没有内容的控件覆盖在没有焦点的输入框上不就行了么。
于是我们得到了这样的代码

Row(){
  ForEach(this.inputIndex,(index:number)=>{
    RelativeContainer(){
      TextInput({text:this.inputValue[index]})
        
      if(!this.inputEnable[index]){//没有焦点则覆盖一个空白Text
        Text().backgroundColor(Color.Transparent)
          .alignRules({
          left: {anchor: index.toString(), align: HorizontalAlign.Start},
          top: {anchor: index.toString(), align: VerticalAlign.Top},
          bottom: {anchor: index.toString(), align: VerticalAlign.Bottom},
          right: {anchor: index.toString(), align: HorizontalAlign.End}
        })
      }
    }.layoutWeight(1).height(40).margin({right:index == this.inputIndex.length-1?0:10})
  })
}

到这里，就解决了点击非焦点输入框的问题。

总结

看起来挺简单的，实际上一点也不难。
还有可以优化的地方：
比如输入的内容可以不用数组，直接用字符串就好，删除和添加都是在末尾进行
比如焦点也可以不用记录的，直接用输入的字符串长度来判断就好。

遗留下的一个问题：
在上面使用enable来控制是否可点击时，为什么先设置enable为true，然后请求焦点会报错？
先设置enable为true，在下一帧时请求焦点还是报错。
这就留给大佬翻源码解释了。

附一个完整代码

import { hilog } from '@kit.PerformanceAnalysisKit'
@Component
struct FourTextInput {
  onFinishInput?: (value: string) => void
  @State inputValue: string[] = ["", "", "", ""]
  @State inputEnable: boolean[] = [true, false, false, false]
  inputIndex: number[] = [0, 1, 2, 3]

  build() {
      Row(){
        ForEach(this.inputIndex,(index:number)=>{
          RelativeContainer(){
            TextInput({text:this.inputValue[index]}).layoutWeight(1).textInputStyle(this.inputEnable[index]).maxLength(1).maxLines(1).id(index.toString()).type(InputType.Number)
              .onDidDelete((_)=>{
                hilog.error(0x01,"InputVerificationCode",`第${index}个执行 onDidDelete`)
                if(this.inputValue[index].length == 0){
                  //不是第一个输入框 且 输入框内没有文字，则删除上一个输入框内容，并且使上一个输入框获取焦点
                  if(index !=0){
                    this.inputValue[index-1]=""
                    this.inputEnable[index] =false
                    this.inputEnable[index-1] =true

                    this.getUIContext().getFocusController().requestFocus((index-1).toString())
                  }else{
                    //如果输入框内有文字，则只删除当前输入框内容
                    this.inputValue[index]=""
                  }
                }
              })
              .onChange((value: string, previewText?: PreviewText)=>{
                hilog.error(0x01,"InputVerificationCode",`第${index}个onChange:  value:${value}  previewText: value-> ${previewText?.value}    offset->${previewText?.offset}`   )
                this.inputValue[index]= value
                if(value.length == 1){
                  if(index != 3){
                    this.inputEnable[index+1] =true
                    this.getUIContext().getFocusController().requestFocus((index+1).toString())
                    this.inputEnable[index] = false
                    // this.inputEnable[index] =false
                  }else{
                    if(this.onFinishInput){
                      let result = ""
                      for(let i =0;i< this.inputValue.length;i++){
                        result += this.inputValue[i]
                      }
                      this.onFinishInput(result)
                    }
                  }
                }
              })
            if(!this.inputEnable[index]){
              Text().backgroundColor(Color.Transparent).alignRules({
                left: {anchor: index.toString(), align: HorizontalAlign.Start},
                top: {anchor: index.toString(), align: VerticalAlign.Top},
                bottom: {anchor: index.toString(), align: VerticalAlign.Bottom},
                right: {anchor: index.toString(), align: HorizontalAlign.End}
              })
            }
          }.layoutWeight(1).height(40).margin({right:index == this.inputIndex.length-1?0:10})
        })
      }.onAppear(()=>{
        this.getUIContext().getFocusController().requestFocus("0")
      })
  }
}

@Extend(TextInput)
function textInputStyle(enable: boolean) {
  .border({
    width: 1,
    color: enable ? "#1b91e0" : "#999999",
    radius: 4,
    style: BorderStyle.Solid,
  })
  .textAlign(TextAlign.Center)
  .layoutWeight(1)
  .maxLength(1)
  .maxLines(1)
  .type(InputType.Number)
  .layoutWeight(1)
  .height(40)
}

export { FourTextInput }

http://www.niftyadmin.cn/n/5862422.html

相关文章

2025年02月21日Github流行趋势

2025年02月21日Github流行趋势

项目名称&#xff1a;source-sdk-2013 项目地址url&#xff1a;https://github.com/ValveSoftware/source-sdk-2013项目语言&#xff1a;C历史star数&#xff1a;7343今日star数&#xff1a;929项目维护者&#xff1a;JoeLudwig, jorgenpt, narendraumate, sortie, alanedwarde…
阅读更多...
llama-factory部署微调方法(wsl-Ubuntu Windows)

llama-factory部署微调方法(wsl-Ubuntu Windows)

llama-factory项目GitHub地址&#xff1a;GitHub - hiyouga/LLaMA-Factory: Unified Efficient Fine-Tuning of 100 LLMs & VLMs (ACL 2024) wsl-Ubuntu&#xff1a; 1.获取项目 git clone https://github.com/hiyouga/LLaMA-Factory.gitcd LLaMA-Factory/ 2.安装环境…
阅读更多...
unity获取指定麦克风的分贝（deepseek）

unity获取指定麦克风的分贝（deepseek）

在Unity中&#xff0c;获取指定麦克风的分贝值需要使用Microphone类来捕获麦克风输入&#xff0c;并通过AudioSource或直接处理音频数据来计算分贝值。以下是实现步骤和示例代码&#xff1a; 实现步骤&#xff1a; 1、初始化麦克风&#xff1a;使用Microphone.Start开始录制麦…
阅读更多...
基于Django的购物商城平台的设计与实现(源码+lw+部署文档+讲解)，源码可白嫖!

基于Django的购物商城平台的设计与实现(源码+lw+部署文档+讲解)，源码可白嫖!

摘要 当今社会进入了科技进步、经济社会快速发展的新时代。国际信息和学术交流也不断加强&#xff0c;计算机技术对经济社会发展和人民生活改善的影响也日益突出&#xff0c;人类的生存和思考方式也产生了变化。传统购物管理采取了人工的管理方法&#xff0c;但这种管理方法存…
阅读更多...
k8s网络插件详解（flannel）

k8s网络插件详解（flannel）

1、介绍 Flannel 是一个轻量级、易于配置的网络插件&#xff0c;旨在简化 Kubernetes 集群中 Pod 网络的管理。Flannel 的核心功能是提供一个虚拟的网络&#xff0c;允许每个 Pod 获取一个独立的 IP 地址&#xff0c;并实现不同节点间的 Pod 之间的通信 2、网络模式 vxlan&am…
阅读更多...
HTML 中的 Canvas 样式设置全解

HTML 中的 Canvas 样式设置全解

在 HTML5 中&#xff0c;<canvas> 元素提供了一个强大的绘图接口&#xff0c;允许开发者通过 JavaScript 实现各种图形和动画效果。为了充分利用 <canvas> 的功能&#xff0c;理解其样式设置是至关重要的。本文将详细介绍如何在 HTML 中设置 <canvas> 的各种…
阅读更多...
2025vue4.x全栈学习关键技术分析线路图

2025vue4.x全栈学习关键技术分析线路图

关键升级点说明‌&#xff1a; ‌编译优化‌ &#xff1a;Vue 4.x采用WASM编译提速300% ‌智能工具链‌ &#xff1a;Vite插件市场新增AI代码审查模块 ‌跨平台能力‌ &#xff1a;Uni-App支持原生ARCore/ARKit调用 ‌安全增强‌ &#xff1a;默认启用WebAuthn生物认证…
阅读更多...
HTML第一节

HTML第一节

一.HTML标签 注意&#xff1a;1.双标签是要包裹内容的 &#xff08;单标签单独记&#xff09; 二.HTML骨架 1.骨架规则 注意&#xff1a;1.title为网页的名字 2.VS code自动生成骨架 注意&#xff1a;1.先输入感叹号&#xff08;必须为英文&#xff09; 再按回车 三.标签间的…
阅读更多...
最新文章

Copyright @ 2022~2023