前言
在之前，自定义过一个车牌省份简称的键盘，其实光有省份简称是不行的，毕竟一个正常的车牌是有省份简称+字母+数字进行组成的，索性，就再自定义一个车牌字母选择键盘，可以和之前的省份简称键盘进行结合使用。
我们先看一下最终实现的效果。
分析实现方式
针对这样的一个字母加数字键盘，可以说，实现方式呢，有多种多样，我们大体可以分为三块，最上面是完成按钮，下面是一排数字按钮，再往下就是字母区域，之所以把数字和字母拆分开来，主要两个的边距是有差异的，分开来更加能容易实现；在绘制字母的时候，有一点需要注意，那就是最后的删除按钮是要占据两个格子。
数字按钮
一排数字没有什么好说的，这里使用的是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 /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字母具有混淆性，所以这个字母是不在车牌键盘内的。
