鸿蒙HarmonyOS实现自定义验证码输入框

1、实现效果：

2、代码如下：

import router from '@ohos.router';
import { InspectorByKey } from '../common/utils';

@Entry
@Component
struct VerificationCode {
   
    @State numList: string[] = new Array(6).fill('');
    @State inputLeft: number = 0;
    @State codeNum: string = "";

    //标题栏
    @Builder TopAreaWidget() {
        Column() {
           
                Row() {
                    Column() {
                        Image($r("app.media.back_svg"))
                            .width('44lpx')
                            .height('44lpx')
                    }
                    .width("100lpx")
                    .height("100lpx")
                    .justifyContent(FlexAlign.Center)
                    .alignItems(HorizontalAlign.Start)
                    .onClick(() => {
                        router.back();
                    })

                    Text("帮助")
                        .fontSize("44lpx")
                        .fontColor("#555")
                }.width("100%")
                .padding({
                    left: "30lpx",
                    right: "30lpx"
                })
                .justifyContent(FlexAlign.SpaceBetween)
            }


    }

    build() {
        Column() {
            this.TopAreaWidget();

            Text("请输入验证码")
                .fontSize("60lpx")
                .fontWeight(500)
                .width("100%")
                .textAlign(TextAlign.Start)
                .margin({
                    top: "100lpx"
                })
            Text("已发送至 157 5805 ****")
                .fontSize("38lpx")
                .margin({
                    top: "30lpx"
                })
                .width("100%")
                .textAlign(TextAlign.Start)

            Stack({ alignContent: Alignment.TopStart }) {

                Row() {
                    ForEach(this.numList, (item, key) => {
                        Text(`${item}`)
                            .width("140lpx")
                            .height("160lpx")
                            .fontSize("66lpx")
                            .fontWeight(500)
                            .textAlign(TextAlign.Center)
                            .id('codeNum' + key)
                            .borderStyle({
                                bottom: BorderStyle.Solid,
                            })
                            .borderWidth({
                                bottom: 1,
                            })
                            .borderColor("#eee")
                    })
                }.width("100%")
                .justifyContent(FlexAlign.SpaceBetween)

                TextInput()
                    .width("140lpx")
                    .height("160lpx")
                    .borderRadius(0)
                    .fontSize("66lpx")
                    .fontWeight(500)
                    .maxLength(6)
                    .padding(0)
                    .caretColor($r("app.color.theme_color"))
                    .type(InputType.Number)
                    .textAlign(TextAlign.Center)
                    .backgroundColor(Color.Transparent)
                    .copyOption(CopyOptions.None)
                    .borderStyle({
                        bottom: BorderStyle.Solid,
                    })
                    .borderWidth({
                        bottom: 1,
                    })
                    .borderColor($r("app.color.theme_color"))
                    .fontColor(Color.Transparent)
                    .id("inputCode")
                    .defaultFocus(true)
                    .offset({
                        x: this.inputLeft
                    })
                    .onFocus(() => {
                        //弹出键盘
                        sendEventByKey("inputCode", 10, "");
                    })
                    .onChange((value) => {
                        let temp = value.split('');
                        this.numList.forEach((value, index) => {
                            this.numList[index] = temp[index] || '';
                        })
                        if (temp.length < 6) {
                            this.inputLeft = px2fp(InspectorByKey.getComponentRect('codeNum' + (temp.length))
                                .left);
                        } else if (temp.length === 6) {
                            //请求验证码校验、登录接口

                        }
                    })

            }
            .width("100%")
            .margin({
                top: "80lpx"
            })

            Text("59s之后重新获取验证码")
                .width("100%")
                .textAlign(TextAlign.Start)
                .fontColor("#999")
                .fontSize("38lpx")
                .margin({
                    top: "80lpx"
                })

        }
        .width('100%')
        .height('100%')
        .padding({
            top: "50lpx",
            left: "30lpx",
            right: "30lpx"
        })
    }
}

3.InspectorByKey 方法

//获取指定id组件的属性
export class InspectorByKey {
    static rect_left
    static rect_top
    static rect_right
    static rect_bottom
    static rect_value

    //获取组件所占矩形区域坐标
    static getComponentRect(key) {
        let strJson = getInspectorByKey(key)
        let obj = JSON.parse(strJson)
        let rectInfo = JSON.parse('[' + obj.$rect + ']')
        this.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0]
        this.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1]
        this.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0]
        this.rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1]
        return this.rect_value = {
            "left": this.rect_left, "top": this.rect_top, "right": this.rect_right, "bottom": this.rect_bottom
        }
    }
}