前言

之前针对车牌省份简称键盘，在Android系统中搞过一个，当时使用的是组合View的形式，考虑到最后一个删除按钮单独占两个格子，做了特殊处理，单独设置了权重weight和单独设置了宽度width，既然鸿蒙系统的应用开发了，于是比葫芦画瓢，把Android版的车牌键盘，用鸿蒙再封装一下。

image.png

鸿蒙搞起来就比较的简单，直接一个Grid组件便可以搞定，最后的删除按钮，使用布局选项GridLayoutOptions便可轻松实现。

本篇文章大致如下：

1、设置GridLayoutOptions，规划键盘摆放

2、设置属性和方法，制定可扩展效果

3、开源后的简单使用

4、使用总结

一、设置GridLayoutOptions，规划键盘摆放

我们最主要的是最后一行的删除按钮，让删除按钮独占两列，我们就可以这样设置GridLayoutOptions。

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

regularSize：大小规则的GridItem在Grid中占的行数和列数，只支持占1行1列即[1, 1]。

最重要的参数是irregularIndexes和onGetIrregularSizeByIndex，irregularIndexes表示的是指定的GridItem索引在Grid中的大小是不规则的，比如我们设置的是最后一个格子，那么就把最后一个格子的索引设置上即可，当然，它是一个数组，在实际的开发中，可以动态的设置；onGetIrregularSizeByIndex是配合irregularIndexes使用，设置不规则GridItem占用的行数和列数，由于我们一行10个，最后一行时，最后是空出了4列，当然，这里我的处理是，直接最后一个占4列，然后在判断索引，设置删除按钮即可，当然，还有其它的处理方式。

首先，定义数据时，需要给数据增加一个空数据，用于最后一个元素的单独设置。

private mLicensePlateList = ["京", "津", "渝", "沪", "冀", "晋", "辽", "吉", "黑", "苏",
    "浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘", "粤", "琼",
    "川", "贵", "云", "陕", "甘", "青", "蒙", "桂", "宁", "新",
    "藏", "使", "领", "学", "港", "澳", ""]

然后在ForEach遍历的时候，针对最后一个索引，单独设置删除按钮，非最后一个元素正常展示即可。

if (index == this.mLicensePlateList.length - 1) {
              Row() {
                Column() {
                  Image(this.deleteIconSrc)
                    .width(this.deleteIconWidth)
                }
                .width(this.deleteWidth)
                .height("100%")
                .backgroundColor(Color.White)
                .borderRadius(2)
                .justifyContent(FlexAlign.Center)
              }
              .width("100%")
              .height("100%")
              .justifyContent(FlexAlign.End)
              .onAreaChange((_: Area, newValue: Area) => {
                this.deleteWidth = Number(newValue.width) / 2 - Number(this.columnsGap) / 2
              })
            }

二、设置属性和方法，制定可扩展效果

如果仅仅只是自己使用，大可不必扩展，只适配自身应用即可，但是如果想要其他人或者其他应用进行使用，那么属性的扩展是很有必要的，毕竟每行展示几个，每个格子的背景，颜色、大小等等都是不一样的，我们可以把必须的这些因素，通过属性的形式暴露出去，尽量满足多需求的保障。

具体的各个属性，直接看第三项中的描述即可。

三、开源后的简单使用

1、远程依赖

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

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

ohpm install @abner/keyboard

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

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

image.png

查看是否引用成功

无论使用哪种方式进行依赖，最终都会在使用的模块中，生成一个oh_modules文件，并创建源代码文件，有则成功，无则失败，如下：

image.png

2、快速使用

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

属性介绍

四、使用总结

目前的LicensePlateView只是一个组件，也就是一个View，你可以把它放到任何的UI布局中，比如自定义的页面，自定义的弹窗等等，当然了，后续，我也会扩展出类似于软键盘形式的弹出方式，可以关注下一个版本。