鸿蒙开发：自定义一个英文键盘

原创

程序员一鸣

修改于 2025-01-08 10:09:16

1650

文章被收录于专栏：HarmonyOS点石成金HarmonyOS点石成金

前言

代码运行环境：全部基于HarmonyOs NEXT
DevEco Studio：Build Version: 5.0.3.900
API：12
modelVersion：5.0.0

自定义键盘系列，陆陆续续已经完成了，车牌省份简称键盘，车牌字母选择键盘以及股票代码键盘，都是一些特殊行业比较常见的键盘，这篇文章，我们再去自定义个普通大众的英文键盘，和其它键盘定义一样，由于每行的间距不一样，所实现的方式也不一样。

代码实现

为了能更好的实现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	距离下边的距离