鸿蒙(HarmonyOS)应用开发实战——自定义安全键盘案例

最新推荐文章于 2024-11-26 20:21:27 发布

CTrup

最新推荐文章于 2024-11-26 20:21:27 发布

阅读量904

点赞数 21

分类专栏： HarmonyOS 移动开发鸿蒙开发文章标签： harmonyos 安全音视频移动开发鸿蒙开发组件化

本文链接：https://blog.youkuaiyun.com/CTrup/article/details/142599492

版权

往期知识点整理

介绍

金融类应用在密码输入时，一般会使用自定义安全键盘。本示例介绍如何使用TextInput组件实现自定义安全键盘场景，主要包括TextInput.customKeyboard绑定自定义键盘、自定义键盘布局和状态更新等知识点。

效果图预览

实现思路

1. 使用TextInput的customKeyboard 的属性方法来设置自定义键盘

当设置自定义键盘时，输入框激活后不会打开系统输入法，而是加载应用指定的自定义组件，针对系统键盘的enterKeyType属性设置将无效。自定义键盘采用覆盖原始界面的方式呈现，不会对应用原始界面产生压缩或者上提。默认在输入控件失去焦点时，关闭自定义键盘，开发者也可以通过TextInputController.stopEditing方法控制键盘关闭。

2. 自定义键盘布局

键盘枚举类型：

键盘类型分为数字键盘，大写、小写键盘，特殊字符键盘
键盘按键类型分为输入操作INPUT、删除操作DELETE、切换数字键盘操作NUMERIC、切换大小写键盘CAPSLOCK、切换数字键盘SPECIAL共五种类型

/**
 * 键盘类型枚举
 */
export enum EKeyboardType {
   
  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)

最低0.47元/天解锁文章