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

前言

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

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

分析实现方式

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

数字按钮

一排数字没有什么好说的，这里使用的是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资源 |

相关总结

车牌字母键盘和一般的键盘还有很大区别的，大家可以发现，键盘上是少一个字母的，因为I字母具有混淆性，所以这个字母是不在车牌键盘内的。