前言
自定义键盘系列，陆陆续续已经完成了，车牌省份简称键盘，车牌字母选择键盘以及股票代码键盘，都是一些特殊行业比较常见的键盘，这篇文章，我们再去自定义个普通大众的英文键盘，和其它键盘定义一样，由于每行的间距不一样，所实现的方式也不一样。
代码实现
为了能更好的实现UI效果，这里也是采用了多组件的实现方式，毕竟每一行的边距是不一样的，总共分为了四行进行实现，大家可以采用网格布局，或者List组件都可以进行实现，这里我采用的Row组件，在Row组件里再使用ForEach进行遍历子组件，当然了，毕竟数据量小，具体用哪一种方式，还是看大家自己选择。
咱们只说一行代码实现即可啊，因为都是重复的，无非就是展示的数据源及边距不一样，每一个子元素重要的就是其权重。
Row() { ForEach(["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"], (item: string) => { Text(item) .layoutWeight(1) .height(this.rectHeight) .fontSize(this.rectTextSize) .fontColor(this.rectTextColor) .backgroundColor(this.englishBgColor) .textAlign(TextAlign.Center) .margin({ left: 5, right: 5 }) .borderRadius(this.rectBorderRadius) .onClick(() => { if (this.onItemClick != undefined) { this.onItemClick(item) } }) }) }
全部代码
代码实现起来非常的简单，大家自己看就行。
@Component export struct EnglishKeyboardView { bgColor: ResourceColor = "#f5f5f5" //背景颜色 englishBgColor: ResourceColor = "#ffffff" //英文背景颜色 otherBgColor: ResourceColor = "#e8e8e8" //非英文背景颜色 rectBorderWidth: Length = 1 //格子边框宽度 rectBorderRadius: Length = 2 //格子边框圆角 rectTextSize: Length = 16 //格子的文字大小 rectTextColor: ResourceColor = "#333333" //格子文字的默认颜色 deleteIconWidth: Length = 30 //删除图片宽度 deleteIconSrc: PixelMap | ResourceStr | DrawableDescriptor = $r("app.media.view_ic_key_delete") rectHeight: Length = 60 //每个格子高度 marginTop: Length = 10 //距离上 marginBottom: Length = 10 //距离下 onItemClick?: (item: string) => void //点击条目 onDelete?: () => void //点击删除 onComplete?: () => void //点击完成 onChinese?: () => void //中文 onSpace?: () => void //空格 onNumber?: () => void //数字 build() { Column() { Row() { ForEach(["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"], (item: string) => { Text(item) .layoutWeight(1) .height(this.rectHeight) .fontSize(this.rectTextSize) .fontColor(this.rectTextColor) .backgroundColor(this.englishBgColor) .textAlign(TextAlign.Center) .margin({ left: 5, right: 5 }) .borderRadius(this.rectBorderRadius) .onClick(() => { if (this.onItemClick != undefined) { this.onItemClick(item) } }) }) } Row() { ForEach(["A", "S", "D", "F", "G", "H", "J", "K", "L"], (item: string) => { Text(item) .layoutWeight(1) .height(this.rectHeight) .fontSize(this.rectTextSize) .fontColor(this.rectTextColor) .backgroundColor(this.englishBgColor) .textAlign(TextAlign.Center) .margin({ left: 5, right: 5 }) .borderRadius(this.rectBorderRadius) .onClick(() => { if (this.onItemClick != undefined) { this.onItemClick(item) } }) }) }.margin({ top: 10, left: 20, right: 20 }) Row() { ForEach(["中", "Z", "X", "C", "V", "B", "N", "M", "删除"], (item: string, index: number) => { if (index == 8) { Column() { Image(this.deleteIconSrc) .width(this.deleteIconWidth) } .layoutWeight(1.5) .justifyContent(FlexAlign.Center) .backgroundColor(this.otherBgColor) .height(this.rectHeight) .onClick(() => { //删除 if (this.onDelete != undefined) { this.onDelete() } }) } else { Text(item) .layoutWeight(index == 0 ? 1.5 : 1) .height(this.rectHeight) .fontSize(this.rectTextSize) .fontColor(this.rectTextColor) .backgroundColor((index == 0) ? this.otherBgColor : this.englishBgColor) .textAlign(TextAlign.Center) .margin({ left: 5, right: 5 }) .borderRadius(this.rectBorderRadius) .onClick(() => { if (index == 0) { //中文 if (this.onChinese != undefined) { this.onChinese() } } else { if (this.onItemClick != undefined) { this.onItemClick(item) } } }) } }) }.margin({ top: 10 }) Row() { ForEach(["123", "space", "确定"], (item: string, index: number) => { Text(item) .layoutWeight((index == 1) ? 2 : 1) .height(60) .backgroundColor(this.otherBgColor) .textAlign(TextAlign.Center) .margin({ left: 5, right: 5 }) .borderRadius(this.rectBorderRadius) .onClick(() => { if (index == 0) { //数字 if (this.onNumber != undefined) { this.onNumber() } } else if (index == 1) { //空格 if (this.onSpace != undefined) { this.onSpace() } } else if (index == 2) { //确定 if (this.onComplete != undefined) { this.onComplete() } } }) }) }.margin({ top: 10 }) }.backgroundColor(this.bgColor) .padding({ top: this.marginTop, bottom: this.marginBottom }) } }
封装使用
和车牌省份简称一样，车牌字母也进行封装，方便大家进行使用。
方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。
建议：在使用的模块路径下进行执行命令。
ohpm install @abner/keyboard
方式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：
"dependencies": { "@abner/keyboard": "^1.0.0"}
代码调用
EnglishKeyboardView({ onItemClick: (item: string) => { //点击事件 console.log("=====点击内容：" + item) }, onDelete: () => { //点击删除 console.log("=====点击删除") }, onComplete: () => { //点击确定 console.log("=====点击确定") }, onChinese: () => { //点击中文切换 console.log("=====点击中文切换") }, onSpace: () => { //点击空格 console.log("=====点击空格") }, onNumber: () => { //点击数字 console.log("=====点击数字") } })
属性介绍
属性 |
类型 |
概述 |
onItemClick |
(item: string) => void |
点击条目回调 |
onDelete |
() => void |
点击删除回调 |
onComplete |
() => void |
点击完成回调 |
onChinese |
() => void |
点击中文回调 |
onSpace |
() => void |
点击空格回调 |
onNumber |
() => void |
点击数字回调 |
bgColor |
ResourceColor |
背景颜色 |
englishBgColor |
ResourceColor |
英文背景颜色 |
otherBgColor |
ResourceColor |
非英文背景颜色 |
rectBorderWidth |
Length |
格子边框宽度 |
rectBorderRadius |
Length |
格子边框圆角 |
rectTextSize |
Length |
格子的文字大小 |
rectTextColor |
ResourceColor |
格子文字的默认颜色 |
deleteIconWidth |
Length |
删除icon宽度 |
deleteIconSrc |
PixelMap /ResourceStr /DrawableDescriptor |
删除icon资源 |
rectHeight |
Length |
每个格子高度 |
marginTop |
Length |
距离上边的距离 |
marginBottom |
Length |
距离下边的距离 |
相关总结
实现方式呢，有很多种，目前采用了比较简单的一种，如果大家采用网格Grid组件实现方式，也是可以的，但是需要考虑每行的边距以及数据，还有最后两行的格子占位问题。
