鸿蒙开发：自定义一个车牌字母键盘

2025-03-22 09:18:08

214次阅读

0个评论

前言

代码运行环境：全部基于HarmonyOs NEXT

DevEco Studio：Build Version: 5.0.3.900

API：12

modelVersion：5.0.0

在之前，自定义过一个车牌省份简称的键盘，其实光有省份简称是不行的，毕竟一个正常的车牌是有省份简称+字母+数字进行组成的，索性，就再自定义一个车牌字母选择键盘，可以和之前的省份简称键盘进行结合使用。

我们先看一下最终实现的效果。

分析实现方式

针对这样的一个字母加数字键盘，可以说，实现方式呢，有多种多样，我们大体可以分为三块，最上面是完成按钮，下面是一排数字按钮，再往下就是字母区域，之所以把数字和字母拆分开来，主要两个的边距是有差异的，分开来更加能容易实现；在绘制字母的时候，有一点需要注意，那就是最后的删除按钮是要占据两个格子。

数字按钮【代码讲解】

一排数字没有什么好说的，这里使用的是Grid进行实现的，设置了10列，当然，大家也可以使用别的方式进行实现。

定义数据源

mNumberList = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]

代码实现

Grid() {
        ForEach(this.mNumberList, (item: string, index: number) => {
          GridItem() {
            Text(item)
              .fontSize(this.rectTextSize)
              .fontColor(this.numProhibit ? this.numProhibitColor :
                (this.itemSelectedArray[index] ? this.rectSelectTextColor : this.rectTextColor))
          }.GridItemAttribute(this, index, item)
        })
      }
      .height(this.rectHeight)
      .columnsTemplate("1fr ".repeat(10).trimEnd())
      .columnsGap(this.columnsGap)
      .rowsGap(this.rowsGap)
      .margin({ top: this.gridMarginTop })
      .scrollBar(BarState.Off)

字母按钮【代码讲解】

字母按钮，和数字实现是类似的，也是使用的Grid组件，有一点差异就是最后的删除按钮，需要占两格，如何进行占两格呢，主要用到了Grid组件的第二个参数layoutOptions，我们使用它来实现最后的删除按钮摆放。

 (scroller?: Scroller, layoutOptions?: GridLayoutOptions): GridAttribute;

设置最后的删除按钮占两格。

 layoutOptions: GridLayoutOptions = {
    regularSize: [1, 1],
    irregularIndexes: [this.mEnglishList.length - 1],
    onGetIrregularSizeByIndex: (_: number) => {
      return [1, 2]
    }
  }

数据源

mEnglishList = [
    "Q", "W", "E", "R", "T", "Y", "U", "O", "P",
    "A", "S", "D", "F", "G", "H", "J", "K", "L",
    "Z", "X", "C", "V", "B", "N", "M", ""]

代码实现

Grid(undefined, this.layoutOptions) {
        ForEach(this.mEnglishList, (item: string, index: number) => {
          GridItem() {
            if (index == this.mEnglishList.length - 1) {
              Row() {
                Column() {
                  Image(this.deleteIconSrc)
                    .width(this.deleteIconWidth)
                }
                .width("100%")
                .height("100%")
                .backgroundColor(Color.White)
                .borderRadius(2)
                .justifyContent(FlexAlign.Center)
              }
              .width("100%")
              .height("100%")
              .justifyContent(FlexAlign.End)
            } else {
              Text(item)
                .fontSize(this.rectTextSize)
                .fontColor(this.itemSelectedArray[index+this.mNumberList.length] ? this.rectSelectTextColor :
                this.rectTextColor)
            }
          }.GridItemAttribute(this, index + this.mNumberList.length, item)

        }, (item: string, index: number) => JSON.stringify(item) + "_" + index)
      }
      .columnsTemplate("1fr ".repeat(this.columnSize).trimEnd())
      .columnsGap(this.columnsGap)
      .rowsGap(this.rowsGap)
      .margin({ top: Number(this.gridMarginTop) + 10, left: 15, right: 15 })
      .scrollBar(BarState.Off)

封装使用

和车牌省份简称一样，车牌字母也进行封装，方便大家进行使用。

方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

建议：在使用的模块路径下进行执行命令。

ohpm install @abner/keyboard

方式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：

"dependencies": { "@abner/keyboard": "^1.0.0"}

代码调用

LicensePlateLetterView({
  onItemClick: (item: string, index: number) => {
    //点击事件
    console.log("=====点击内容：" + item + "===点击索引：" + index)
  },
  onDelete: () => {
    //点击删除
    console.log("=====点击删除")
  }
})

相关属性

属性	类型	概述
onItemClick	(item: string, index: number) => void	点击条目回调
onDelete	() => void	点击删除回调
onComplete	(item: string) => void	点击完成回调
rowsGap	Length	行间距
columnsGap	Length	列间距
columnSize	number	展示几列，默认是10列
bgColor	ResourceColor	背景颜色
marginLeft	Length	距离左边
marginRight	Length	距离右边
rectHeight	Length	每个格子高度
titleHeight	Length	标题栏高度
rootHeight	Length	键盘整体的高度
gridMarginTop	Length	网格距离顶部
gridMarginBottom	Length	网格距离底部
completeTextColor	ResourceColor	完成按钮的颜色
completeFontSize	number/string/ Resource	完成文字大小
isShowComplete	boolean	是否显示完成按钮
rectBgColor	ResourceColor	格子背景
rectSelectBgColor	ResourceColor	格子选中背景
rectBorderWidth	Length	格子边框宽度
rectBorderRadius	Length	格子圆角
rectBorderColor	ResourceColor	格子边框颜色
rectBorderSelectColor	ResourceColor	格子选中边框颜色
rectTextSize	Length	格子的文字大小
rectTextColor	Length	格子文字的默认颜色
rectSelectTextColor	ResourceColor	格子文字的选中颜色
numProhibit	boolean	是否禁止数字
numProhibitColor	ResourceColor	禁止文字颜色
deleteIconWidth	Length	删除图片宽度
deleteIconSrc	PixelMap/ResourceStr/ DrawableDescriptor	删除icon资源