鸿蒙便捷生活类行业实践——车牌号编辑

如果以【学员】的身份加入，请加入下方链接班级

一起拿鸿蒙礼盒，戳我戳我！！

本期活动时间：2025年8月1日-12月31日
————————————————

场景介绍

车牌号编辑是便捷生活应用的高频使用场景之一，如用户在离开停车场进行缴费时，需要输入车牌号进行缴费。

本示例主要基于TextInput和Grid组件实现自定义键盘，用于编辑车牌号。

效果预览

实现思路

1. 通过TextInput组件的customKeyboard属性实现键盘的自定义并隐藏TextInput组件。

   TextInput({ controller: this.controller, text: $$this.inputValue })
   .customKeyboard(this.keyboardBuilder())
   .opacity(0)
   .onChange((value) => {
   this.codeTxt = value
   if (this.inputIndex !== null) {
   this.inputIndex = Math.min(this.inputIndexArray.length - 1, this.codeTxt.length)
   this.onInputIndexChange(this.inputIndex)
   }
   })

2. 自定义键盘的布局采用Grid组件实现。

   Grid() {
   ForEach(this.items, (item: IKeyAttribute) => {
   GridItem() {
   this.myGridItem(item)
   }
   .onClick(() => {
   this.onKeyboardEvent?.(item);
   })
   }, (item: IKeyAttribute, index: number) => JSON.stringify(item) + index)
   }
   .rowsTemplate(new Array(this.rowCount).fill('1fr').join(' '))
   .columnsTemplate(new Array(this.columnCount).fill('1fr').join(' '))
   .rowsGap(this.rowSpace)
   .columnsGap(this.columnSpace)
   .width(KeyboardConstants.FULL_WIDTH)
   .height(this.itemHeight * this.rowCount + this.rowSpace * (this.rowCount - 1))

3. 实现车牌号每个字符的独立输入框。

   Row() {
   ForEach(this.inputIndexArray, (item: number) => {
   this.licensePlate(item)
   }
   })
   }

约束与限制

• 本示例支持API Version 16 Release及以上版本。
• 本示例支持HarmonyOS 5.0.4 Release SDK及以上版本。
• 本示例需要使用DevEco Studio 5.0.4 Release及以上版本进行编译运行。

工程目录

├──entry/src/main/ets
│ ├──components
│ │ ├──LicensePlateComponent.ets // 车牌号输入组件
│ │ └──PaymentInfoComponent.ets // 付款信息组件
│ ├──constants
│ │ └──StyleConstants.ets // 样式常量
│ ├──entryability
│ │ └──EntryAbility.ets // 入口
│ └──pages
│ └──Index.ets // 首页
├──entry/src/main/resources // 应用资源目录
├──features/vehicleKeyboard/src/main/ets
│ ├──components
│ │ ├──Keyboard.ets // 自定义键盘UI
│ │ └──VehicleInput.ets // 车牌输入组件
│ └──constants
│ └──KeyboardConstant.ets // 定义键盘常量
└──features/vehicleKeyboard/src/main/resources // 应用资源目录