HarmonyOS Next 自定义安全键盘案例_鸿蒙next 自定义键盘

NUMERIC, //数字键盘
UPPERCASE, // 大写字母键盘
LOWERCASE, // 小写字母键盘
SPECIAL, // 特殊字符键盘
}

/**

• 键盘按键类型枚举
  */
  export enum EKeyType {
  INPUT, // 输入类型，输入具体的值
  DELETE, // 删除一个输入字符
  NUMERIC, // 切换数字键盘
  CAPSLOCK, // 切换大小写键盘
  SPECIAL, // 切换特殊字符键盘
  }

在真实业务场景下，自定义安全键盘数据包括值、UI属性、位置等都通过数据请求来下发，键盘按键数据接口定义如下：

/**

• 键盘按键数据接口
  */
  export interface IKeyAttribute {
  label: string | Resource;
  value?: string;
  type?: EKeyType;
  fontSize?: number;
  fontColor?: string | Color;
  backgroundColor?: string | Color;
  position?: [number, number, number, number];
  }

自定义键盘布局：分为标题栏和键盘两部分，键盘使用Grid布局，每个按键GridItem的值、UI属性和位置都通过数据请求下发，不需要额外计算。


数字键盘为4\*3的网格布局，但是大小写键盘和特殊字符键盘的布局为不规则布局，如果设置为4 \* 10的网格，有的按键占用1 \* 1.5，但是GridItem属性不支持占用非整数列。本文将该场景下将网格拆分为更小的单元，为4 \* 20网格布局，每个字母按键占1 \* 2，删除按键则占1 \* 3,空格则占1 \* 10，这样就保证每个按键都要占用整数单元。

Column() {
this.titleBar();

Grid() {
ForEach(this.items, (item: IKeyAttribute) => {
GridItem() {
this.myGridItem(item)
}
.width(‘100%’)
.height(this.itemHeight)
.rowStart(item?.position?.[0])
.columnEnd(item?.position?.[1])
.columnStart(item?.position?.[2])
.columnEnd(item?.position?.[3])
.backgroundColor(item.backgroundColor)
.borderRadius($r(“app.integer.key_border_radius”))
.onClick(() => {
…
})
}, (item: IKeyAttribute, index: number) => JSON.stringify(item) + index