哪位大佬有实现HarmonyOS鸿蒙Next车牌输入组件

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

哪位大佬有实现HarmonyOS鸿蒙Next车牌输入组件 哪位大佬有实现车牌输入组件

3 回复

export interface commonBorder { width?: Length | EdgeWidths, color?: ResourceColor | EdgeColors, radius?: Length | BorderRadiuses, style?: BorderStyle | EdgeStyles }

class CommonKeyItem { key: string; display: boolean;

constructor(key: string, display: boolean) { this.key = key; this.display = display } }

@Entry @Component struct CustomKeyboard { @State @Watch(‘setValue’) codeTxt: string[] = []; @State screenWidth: number = 0; @State maxLength: number = 8; @State showMouse: boolean[] = [] @State inputCurse: number = 0 provincesKeyBoard: string[][] = [[ “皖”, “京”, “津”, “渝”, “沪”, “冀”, “晋”, “辽”, “吉” ], [“黑”, “苏”, “浙”, “闽”, “赣”, “鲁”, “豫”, “鄂”, “湘”], [“粤”, “琼”, “川”, “贵”, “云”, “陕”, “甘”, “青”], [“蒙”, “桂”, “宁”, “新”, “藏”, “删”]] commonKeys: string[][] = [[“1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “0”], [“Q”, “W”, “E”, “R”, “T”, “Y”, “U”, “I”, “O”, “P”], [“A”, “S”, “D”, “F”, “G”, “H”, “J”, “K”, “L”], [“Z”, “X”, “C”, “V”, “B”, “N”, “M”], [“港”, “澳”, “学”, “删”]] commonKeyBoard: CommonKeyItem[][] = [[], [], [], [], []] inputBoxSize: number = 0 controller: TextInputController = new TextInputController() private btnCancelBorder?: commonBorder = { width: ‘3px’, color: ‘#ccc’, style: BorderStyle.Solid } private btnCancelBorderActive: commonBorder = { width: ‘3px’, color: Color.Red, style: BorderStyle.Solid }

aboutToAppear(): void { console.info(‘IsaKit aboutToAppear’) this.screenWidth = 1080; this.showMouse = new Array(this.maxLength).fill(false); this.showMouse[0] = true for (let i = 0; i < this.maxLength; i++) { this.codeTxt[i] = “” } this.codeTxt[this.maxLength-1] = “新能源” this.inputBoxSize = px2vp(this.screenWidth) / (this.maxLength + 1) - 2 this.resetDisplay([]); }

setValue() { this.getForbiddenInput(this.inputCurse) this.handelInputTxt(this.inputCurse); }

getForbiddenInput(inputCurse: number) { switch (inputCurse) { case 1: this.resetDisplay([“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “I”, “港”, “澳”, “学”]) break case 2: case 3: case 4: case 5: case 7: this.resetDisplay([“I”, “O”, “港”, “澳”, “学”]) break case 6: this.resetDisplay([“I”, “O”]) break default: break } }

handelInputTxt(length: number) { length === this.maxLength ? this.showMouse.fill(false) : this.showMouse.fill(false).splice(length, 0, true); }

@Builder CustomKeyboardBuilder() { Column() { if (this.inputCurse == 0) { this.buildProvinceKeyboard(this.provincesKeyBoard[0]) this.buildProvinceKeyboard(this.provincesKeyBoard[1]) this.buildProvinceKeyboard(this.provincesKeyBoard[2]) this.buildProvinceKeyboard(this.provincesKeyBoard[3]) } if (this.inputCurse == 1) { this.buildCommonKeyboardTotal() } if (this.inputCurse == 2) { this.buildCommonKeyboardTotal() } if (this.inputCurse == 3) { this.buildCommonKeyboardTotal() } if (this.inputCurse == 4) { this.buildCommonKeyboardTotal() } if (this.inputCurse == 5) { this.buildCommonKeyboardTotal() } if (this.inputCurse == 6) { this.buildCommonKeyboardTotal() } if (this.inputCurse == 7) { this.buildCommonKeyboardTotal() } if (this.inputCurse == 8) { this.buildCommonKeyboardTotal() } }.backgroundColor(0xf0f0f0) }

@Builder buildCommonKeyboardTotal() { this.buildCommonKeyboard(this.commonKeyBoard[0]) this.buildCommonKeyboard(this.commonKeyBoard[1]) this.buildCommonKeyboard(this.commonKeyBoard[2]) this.buildCommonKeyboard(this.commonKeyBoard[3]) this.buildCommonKeyboard(this.commonKeyBoard[4]) }

@Builder buildCommonKeyboard($$: CommonKeyItem[]) { Grid() { ForEach($$, (item: CommonKeyItem) => { GridItem() { if (item.key == “删”) { Text() { ImageSpan($r(‘app.media.ic_tab_mine_on’)) .width(‘100px’) .height(‘100px’) .objectFit(ImageFit.Fill) .verticalAlign(ImageSpanAlignment.CENTER); } .fontSize(18) .fontWeight(600) .textAlign(TextAlign.Center) .width(36) .height(50) .backgroundColor(Color.White) .borderRadius(3) .onClick(() => { let tmp = this.inputCurse this.inputCurse– if (tmp == this.maxLength - 1) { this.codeTxt[tmp] = “新能源”; } else { this.codeTxt.push("") this.codeTxt[tmp] = “” this.codeTxt.pop() } console.info(“this.inputText”, “deleteLeft this.inputText===” + this.codeTxt); }); } else { if (item.display) { Text(item.key) .width(25) .backgroundColor(Color.White) .fontSize(18) .fontWeight(600) .textAlign(TextAlign.Center) .width(35) .height(50) .backgroundColor(Color.White) .borderRadius(3) .onClick(() => { if (this.inputCurse > this.maxLength - 1) { console.info(“超过最大长度”); } else { let tmp = this.inputCurse this.inputCurse++ this.codeTxt[tmp] = item.key; } }); } else { Text(item.key) .width(25) .backgroundColor(Color.White) .fontSize(18) .fontWeight(600) .textAlign(TextAlign.Center) .width(35) .height(50) .backgroundColor(0xE0E0f0) .borderRadius(3) .onClick(() => { console.info(“按键禁止输入”); }); } } }; }); }.maxCount($$.length).columnsGap(2).rowsGap(2).padding(2) }

@Builder buildProvinceKeyboard(keyboard: string[]) { Grid() { ForEach(keyboard, (item: string) => { GridItem() { if (item == “删”) { Text() { ImageSpan($r(‘app.media.ic_tab_mine_on’)) .width(‘100px’) .height(‘100px’) .objectFit(ImageFit.Fill) .verticalAlign(ImageSpanAlignment.CENTER); } .fontSize(18) .fontWeight(600) .textAlign(TextAlign.Center) .width(38) .height(50) .backgroundColor(Color.White) .borderRadius(3) .onClick(() => { let tmp = this.inputCurse this.inputCurse– this.codeTxt[tmp] = “”; console.info(“this.inputText”, “deleteLeft this.inputText===” + this.codeTxt); }); } else { Text(item) .fontSize(18) .fontWeight(600) .textAlign(TextAlign.Center) .width(38) .height(50) .backgroundColor(Color.White) .borderRadius(3) .onClick(() => { let tmp = this.inputCurse this.inputCurse++ this.codeTxt[tmp] = item; }); } }; }); }.maxCount(keyboard.length).columnsGap(2).rowsGap(2).padding(2) }

@Builder componentBuilder() { Column() { Blank().height(100) this.buildAEnterCodeInput() } .margin({ top: 10 }) .borderRadius(8) }

@Builder buildAEnterCodeInput() { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Column() { Row() { Text(“车牌号码”) }.height(30)

    Row() {
      Text(this.codeTxt[0])
        .fontSize(18)
        .fontWeight(600)
        .textAlign(TextAlign.Center)
        .width(this.inputBoxSize)
        .height(this.inputBoxSize)
        .margin({ left: 1, right: 1 })
        .border(this.showMouse[0] ? this.btnCancelBorderActive : this.btnCancelBorder)
        .borderRadius(5)
        .onClick(() => {
          this.inputCurse = 0
          this.setValue()
          focusControl.requestFocus('LicensePlateInput')
        })
      Text(this.codeTxt[1])
        .fontSize(18)
        .fontWeight(600)
        .textAlign(TextAlign.Center)
        .width(this.inputBoxSize)
        .height(this.inputBoxSize)
        .margin({ left: 1, right: 1 })
        .border(this.showMouse[1] ? this.btnCancelBorderActive : this.btnCancelBorder)
        .borderRadius(5)
        .onClick(() => {
          this.inputCurse = 1
          this.setValue()
          focusControl.requestFocus('LicensePlateInput')
        })
      Text('.')
        .fontSize(22)
        .fontWeight(600)
        .textAlign(TextAlign.Center)
        .margin({ left: 1, right: 1 })
      Text(this.codeTxt[2])
        .fontSize(18)
        .fontWeight(600)
        .textAlign(TextAlign.Center)
        .width(this.inputBoxSize)
        .height(this.inputBoxSize)
        .margin({ left: 1, right: 1 })
        .border(this.showMouse[2] ? this.btnCancelBorderActive : this.btnCancelBorder)
        .borderRadius(5)
        .onClick(() => {
          this.inputCurse = 2
          this.setValue()
          focusControl.requestFocus('LicensePlateInput')
        })
      Text(this.codeTxt[3])
        .fontSize(18)
        .fontWeight(600)
        .textAlign(TextAlign.Center)
        .width(this.inputBoxSize)
        .height(this.inputBoxSize)
        .margin({ left: 1, right: 1 })
        .border(this.showMouse[3] ? this.btnCancelBorderActive : this.btnCancelBorder)
        .borderRadius(5)
        .onClick(() => {
          this.inputCurse = 3
          this.setValue()
          focusControl.requestFocus('LicensePlateInput')
        })
      Text(this.codeTxt[4])
        .fontSize(18)
        .fontWeight(600)
        .textAlign(TextAlign.Center)
        .width(this.inputBoxSize)
        .height(this.inputBoxSize)
        .margin({ left: 1, right: 1 })
        .border(this.showMouse[4] ? this.btnCancelBorderActive : this.btnCancelBorder)
        .borderRadius(5)
        .onClick(() => {
          this.inputCurse = 4
          this.setValue()
          focusControl.requestFocus('LicensePlateInput')
        })
      Text(this.codeTxt[5])
        .fontSize(18)
        .fontWeight(600)
        .textAlign(TextAlign.Center)
        .width(this.inputBoxSize)
        .height(this.inputBoxSize)
        .margin({ left: 1, right: 1 })
        .border(this.showMouse[5] ? this.btnCancelBorderActive : this.btnCancelBorder)
        .borderRadius(5)
        .onClick(() => {
          this.inputCurse = 5
          this.setValue()
          focusControl.requestFocus('LicensePlateInput')
        })
      Text(this.codeTxt[6])
        .fontSize(18)
        .fontWeight(600)
        .textAlign(TextAlign.Center)
        .width(this.inputBoxSize)
        .height(this.inputBoxSize)
        .margin({ left: 1, right: 1 })
        .border(this.showMouse[6] ? this.btnCancelBorderActive : this.btnCancelBorder)
        .borderRadius(5)
        .onClick(() => {
          this.inputCurse = 6
          this.setValue()
          focusControl.requestFocus('LicensePlateInput')
        })
      Text(this.codeTxt[7])
        .fontSize(this.codeTxt[7] == "新能源" ? 10 : 18)
        .fontWeight(600)
        .textAlign(TextAlign.Center)
        .width(this.inputBoxSize)
        .height(this.inputBoxSize)
        .margin({ left: 1, right: 1 })
        .border(this.showMouse[7] ? this.btnCancelBorderActive : this.btnCancelBorder)
        .borderRadius(5)
        .fontColor(Color.Blue)
        .onClick(() => {
          this.inputCurse = 7
          this.setValue()
          focusControl.requestFocus('LicensePlateInput')
        })
    }
    .margin({ top: 20, bottom: 20 })

    TextInput()
      .width('100%')
      .height(250)
      .opacity(0)
      .id('LicensePlateInput')
      .customKeyboard(this.CustomKeyboardBuilder())
  }
}
.backgroundColor(Color.White)
.height(50)
.margin({ left: 15, right: 15 })
.id("customInput")
.defaultFocus(false)

}

build() { Column() { this.componentBuilder() } }

private resetDisplay(forbiddenKeys: string[]) { for (let i = 0; i < this.commonKeys.length; i++) { for (let j = 0; j < this.commonKeys[i].length; j++) { if (forbiddenKeys.indexOf(this.commonKeys[i][j]) == -1) { this.commonKeyBoard[i][j] = new CommonKeyItem(this.commonKeys[i][j], true); } else { this.commonKeyBoard[i][j] = new CommonKeyItem(this.commonKeys[i][j], false); } } } } }

更多关于哪位大佬有实现HarmonyOS鸿蒙Next车牌输入组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS鸿蒙Next的车牌输入组件可以通过鸿蒙的UI框架进行开发。鸿蒙提供了丰富的UI组件和API，开发者可以利用这些资源实现车牌输入功能。以下是一个简单的实现思路：

  1. 布局设计：使用鸿蒙的DirectionalLayout或DependentLayout来设计车牌输入界面的布局。可以包含一个TextField组件用于输入车牌号码，以及一些按钮用于确认、取消等操作。

  2. 输入限制：通过TextField的onTextChanged事件监听输入内容，使用正则表达式或其他逻辑来限制输入内容，确保输入的车牌号码符合规范。

  3. 键盘控制：鸿蒙提供了自定义键盘的支持，可以通过InputMethodManager来控制键盘的显示和隐藏，或者使用自定义的软键盘来优化用户体验。

  4. 数据验证：在用户输入完成后，可以通过正则表达式或其他验证逻辑对输入的车牌号码进行验证，确保其合法性和正确性。

  5. 事件处理：为确认按钮添加点击事件，在用户点击确认后，获取输入的车牌号码并进行后续处理。

以下是一个简单的代码示例：

import { TextField, Button, DirectionalLayout, InputMethodManager } from '@ohos/ui';

class LicensePlateInput extends DirectionalLayout {
    private textField: TextField;
    private confirmButton: Button;

    constructor(context: Context) {
        super(context);
        this.textField = new TextField(context);
        this.confirmButton = new Button(context);

        this.textField.setPlaceholder("请输入车牌号码");
        this.confirmButton.setText("确认");

        this.confirmButton.setOnClickListener(() => {
            const licensePlate = this.textField.getText();
            if (this.validateLicensePlate(licensePlate)) {
                // 处理确认后的逻辑
            } else {
                // 提示输入错误
            }
        });

        this.addComponent(this.textField);
        this.addComponent(this.confirmButton);
    }

    private validateLicensePlate(licensePlate: string): boolean {
        // 车牌号码验证逻辑
        const regex = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
        return regex.test(licensePlate);
    }
}

通过上述步骤和代码示例，可以基本实现一个简单的车牌输入组件。开发者可以根据实际需求进一步优化和扩展功能。

要实现HarmonyOS鸿蒙Next的车牌输入组件，可以参考以下步骤：

  1. 使用TextInput组件：创建一个TextInput组件，用于用户输入车牌号码。
  2. 设置输入限制：通过正则表达式限制输入内容，确保符合车牌格式（如字母和数字的组合）。
  3. 添加键盘类型：设置键盘类型为text或number，方便用户输入。
  4. 实时验证：在输入过程中实时验证输入内容，并给出错误提示。
  5. 自定义样式：根据需求自定义组件样式，使其与UI设计一致。

具体实现可以参考鸿蒙官方文档和示例代码，确保组件功能完善且用户体验良好。

回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！