纯血鸿蒙APP实战开发——自定义安全键盘案例

介绍

金融类应用在密码输入时,一般会使用自定义安全键盘。本示例介绍如何使用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).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)}.margin({ bottom: $r("app.integer.key_board_marin_bottom") }).columnsTemplate(this.curKeyboardType === EKeyboardType.NUMERIC ? "1fr 1fr 1fr" :"1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr").rowsTemplate("1fr 1fr 1fr 1fr") // Grid高度均分成4份.rowsGap(this.rowSpace) // 设置行间距.columnsGap(this.columnSpace) // 设置列间距.width('100%').height(this.itemHeight * this.rowCount + this.rowSpace * (this.rowCount - 1))
}
.width('100%')
.padding({ left: this.columnSpace, right: this.columnSpace })
.backgroundColor(Color.Black)
}
3. 状态更新

主要是子组件自定义键盘的按键事件如何传递到父组件,可以在父组件定义好键盘按键事件响应函数onKeyboardEvent,传递给子组件,然后子组件按键时调用父组件传递过来的onKeyboardEvent即可。需要注意的是,在子组件中,必须定义inputValue且使用@Link装饰器,这样能保证子组件调用时onKeyboardEvent时inputValue不为空,父子组件数据双向更新。

@Component
export struct CustomSafeKeyboardView {@State inputValue: string = '';@State items: IKeyAttribute[] = numericKeyData;@State curKeyboardType: EKeyboardType = EKeyboardType.NUMERIC;controller: TextInputController = new TextInputController();/*** 键盘按键事件响应函数* @param item*/onKeyboardEvent(item: IKeyAttribute) {switch (item.type) {// 输入类型,更新输入内容case EKeyType.INPUT:this.inputValue += item.value;break;// 删除一个已输入的末尾字符case EKeyType.DELETE:this.inputValue = this.inputValue.slice(0, -1);break;// 切换数字字符键盘case EKeyType.NUMERIC:if (this.curKeyboardType !== EKeyboardType.NUMERIC) {this.curKeyboardType = EKeyboardType.NUMERIC;this.items = numericKeyData;}break;// 切换大小写case EKeyType.CAPSLOCK:if (this.curKeyboardType === EKeyboardType.LOWERCASE) {// 切换大写字母键盘this.curKeyboardType = EKeyboardType.UPPERCASE;this.items = upperCaseKeyData;} else {// 切换小写字母键盘this.curKeyboardType = EKeyboardType.LOWERCASE;this.items = lowerCaseKeyData;}break;// 切换特殊字符键盘case EKeyType.SPECIAL:if (this.curKeyboardType !== EKeyboardType.SPECIAL) {this.curKeyboardType = EKeyboardType.SPECIAL;this.items = specialKeyData;}break;default:console.info(`Sorry, we are out of input type.`);}}/*** 自定义键盘组件Builder*/@BuildercustomKeyboardBuilder() {CustomKeyboard({items: this.items,inputValue: this.inputValue,curKeyboardType: this.curKeyboardType,onKeyboardEvent: this.onKeyboardEvent,controller: this.controller})}build() {Column() {Row().height($r("app.integer.row_height"))Image($r("app.media.avatar")).width($r("app.integer.avatar_weight")).height($r("app.integer.avatar_height")).objectFit(ImageFit.Fill)Text($r("app.string.account_name")).fontSize($r("app.integer.text_font_size")).margin({ top: $r("app.integer.common_margin_padding") })TextInput({text: this.inputValue,placeholder: $r("app.string.placeholder"),controller: this.controller})// 绑定自定义键盘.type(InputType.Password).customKeyboard(this.customKeyboardBuilder())// 绑定自定义安全键盘.height($r("app.integer.text_input_height")).border(null).margin({ top: $r("app.integer.common_margin_padding") })Button($r("app.string.login_button_label")).type(ButtonType.Capsule).fontSize($r("app.integer.login_button_font_size")).width($r("app.integer.login_button_width")).height($r("app.integer.login_button_height")).margin({ top: $r("app.integer.login_button_margin") }).backgroundColor(Color.Pink).onClick(() => {this.controller.stopEditing();})}.width($r("app.string.one_hundred_percent")).height($r("app.string.one_hundred_percent")).padding($r("app.integer.common_margin_padding"))}
}

高性能知识点

不涉及

工程结构&模块类型

customsafekeyboard              // har类型
|---components                  // 自定义组件
|   ---CustomKeyboard.ets  
|---model                       // 模型层
|   ---Constants                // 定义常量数据
|---CustomSafeKeyboardView.ets  // 主页面

模块依赖

  1. 依赖common模块来实现日志的打印
  2. 依赖路由模块,供entry模块实现路由导航

参考资料

TextInput

鸿蒙全栈开发全新学习指南

也为了积极培养鸿蒙生态人才,让大家都能学习到鸿蒙开发最新的技术,针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线【包含了大厂APP实战项目开发】

本路线共分为四个阶段:

第一阶段:鸿蒙初中级开发必备技能

第二阶段:鸿蒙南北双向高工技能基础:gitee.com/MNxiaona/733GH

第三阶段:应用开发中高级就业技术

第四阶段:全网首发-工业级南向设备开发就业技术:https://gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》(共计892页)

如何快速入门?

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题(含参考答案):gitee.com/MNxiaona/733GH

鸿蒙入门教学视频:

美团APP实战开发教学:gitee.com/MNxiaona/733GH

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新学习资源,请移步前往小编:gitee.com/MNxiaona/733GH

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/10027.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker安装nginx支持ssl 实现https访问(完整版)

全文目录,一步到位 1.前言简介1.1 专栏传送门1.1.1 本文简介 2. docker安装nginx支持ssl2.0 准备ssl证书(例: 阿里云)2.0.1 配置域名解析2.0.2 找到数字证书管理服务并签发ssl证书2.0.3 选择默认证书 填写域名 创建2.0.4 提交审核, 签发成功2.0.5 解压并上传到宿主机ssl路径下 …

异常处理/__LINE__ 与 __FILE__ 宏在调试和异常处理中的高级使用

文章目录 概述痛点分析_LINE_ 代码所在行号_LINE_ 直接转为字符串_LINE_ 作为整型数据使用_LINE_标记宏函数的调用位置 _FILE_ 代码所在文件名简单实验不期望 _FILE_ 宏代表全路径 assert 使用了 _FILE_ 和 _LINE_借助TLS技术小结 概述 _LINE_和_FILE_是C/C中的预定义宏&#…

HarmonyOS开发案例:【生活健康app之编写通用工具类】(5)

本节将介绍日志打印、时间换算等通用工具类的编写和使用,工具类可以简化应用代码编写和业务流程处理。 日志类 日志类Logger旨在提供一个全局的日志打印、日志管理的地方,既可以规范整个应用的日志打印,也方便日后对日志工具类进行修改&…

P1434 滑雪(java)

题目描述: Michael 喜欢滑雪。这并不奇怪,因为滑雪的确很刺激。可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你。Michael 想知道在一个区域中最长的滑坡。区域由一个二维数组给…

利用106短信群发平台能否提升沟通效率?

利用106短信群发平台确实能够显著提升沟通效率,具体体现在以下几个方面: 1.快速传递信息:106短信群发平台能够实现信息的快速传递。一旦设置好发送内容和接收群体,短信便能在瞬间发送至大量用户。这种即时性确保了信息的迅速传达…

医院预约挂号系统微信小程序APP

医院预约挂号小程序,前端后台(后台 java spring boot mysql) 医院预约挂号系统具体功能介绍:展示医院信息、可以注册和登录, 预约挂号(包含各个科室的预约,可以预约每个各个医生)&…

java-spring 09 下.populateBean (方法成员变量的注入@Autowird,@Resource)

01.在populateBean 方法中的:用于Autowird,Resource注入 // 后处理器已经初始化boolean hasInstAwareBpps hasInstantiationAwareBeanPostProcessors();// 需要依赖检查boolean needsDepCheck (mbd.getDependencyCheck() ! AbstractBeanDefinition.DEP…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-15.4讲 GPIO中断实验-IRQ中断服务函数详解

前言: 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM(MX6U)裸机篇”视频的学习笔记,在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

代码随想录算法训练营Day35 | 435. 无重叠区间、763.划分字母区间、56. 合并区间 | Python | 个人记录向

本文目录 435. 无重叠区间做题基于左边界的贪心算法基于左边界,把452.用最少数量的箭引爆气球代码稍做修改 763.划分字母区间做题看文章 56. 合并区间做题看文章 以往忽略的知识点小结个人体会 435. 无重叠区间 代码随想录:435. 无重叠区间 Leetcode&am…

三生随记——耳机里的诅咒

深夜,城市的灯火已经渐渐熄灭,只剩下一轮明月孤独地悬挂在天空中,洒下银白色的光芒。在这样一个寂静的夜晚,李浩独自一人坐在昏暗的房间里,耳机紧紧贴在耳边,他正在观看一部知名的恐怖电影。 电影里的恐怖情…

java对象互换工具类

1:将Object类型转成json字符串 /*** 将对象转为字符串* param obj* return*/public static String toString(Object obj) {if(obj null) {return null;}if ("".equals(obj.toString())) {return null;}if (obj instanceof String) {return obj.toString();}try {Ob…

Spring Cloud Gateway 11种断言工厂

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 Spring Cloud Gateway路由匹配是Spring WebFlux基础功能的一部分,在Spri…

js将html网页转换成PDF并解决了图表文字被切割的问题

给页面内所有要转换成PDF的HTML元素添加一个class“toPDF” 输出的时候, 遍历所有class"toPDF"的HTML元素 将它们逐个加入到pdf文档中,添加的时候如果超出的则添加一页 一、安装 npm install --save html2canvas npm i jspdf --save二、html…

ruoyi-vue-pro 使用记录(2)

ruoyi-vue-pro 使用记录(2) 数据库商城商品模块数据表营销数据库交易数据库统计数据库 数据库 商城 参考官方文档 ruoyi-vue-pro yudao 项目商城 mall 模块启用及相关SQL脚本 商品模块(中心)以 product_ 作为前缀的表交易模块…

Acwing2024蓝桥杯并查集

并查集模板 int n,dad[N],sizee[N];//sizee数组规定只有祖宗结点是有效值 //初始化所有集合 void Init(){for(int i1;i<n;i){dad[i]i;sizee[i]1;}return ; } //查找a的祖宗节点 int Find(int a){if(dad[a]!a) dad[a]Find(dad[a]);//每个集合中只有祖宗节点的值等于自身的值…

你认识edge吗,edge是做什么的

简介 Microsoft Edge&#xff08;研发代号为Project Spartan&#xff0c;又译作微软边缘浏览器&#xff0c;Edge浏览器&#xff09;是一个由微软研发的基于Chromium开源项目及其他开源软件的网页浏览器&#xff0c;于2015年1月21日公布&#xff0c;2015年3月30日公开发布第一个…

pyqt曲线轨迹运动

pyqt曲线轨迹运动 pyqt QPropertyAnimation介绍曲线轨迹运动代码 pyqt QPropertyAnimation介绍 QPropertyAnimation 是 PyQt中的一个类&#xff0c;它用于对 Qt 对象的属性进行动画处理。通过使用 QPropertyAnimation&#xff0c;你可以平滑地改变一个对象的属性值&#xff0c…

闭散列哈希表

一、什么是 哈希 &#xff1f; 1.1 哈希概念 与 哈希冲突 在正式介绍闭散列哈希之前&#xff0c;我们需要明确 哈希 的概念。 哈希 &#xff1a;构造一种数据存储结构&#xff0c;通过函数 HashFunc() &#xff0c;使 元素的存储位置 与 其对应的键值 建立一一映射关系&…

国产开源物联网操作系统

软件介绍 RT-Thread是一个开源、中立、社区化发展的物联网操作系统&#xff0c;采用C语言编写&#xff0c;具有易移植的特性。该项目提供完整版和Nano版以满足不同设备的资源需求。 功能特点 1.内核层 RT-Thread内核包括多线程调度、信号量、邮箱、消息队列、内存管理、定时器…

JVM基础之垃圾回收

垃圾回收 1. Base 内存泄漏&#xff1a;不再使用的对象在系统中未被回收 内存溢出&#xff1a;内存泄漏的积累 手动触发垃圾回收&#xff1a;System.gc(),该方法不一定会立即回收垃圾&#xff0c;仅仅是向JVM发送一个垃圾回收请求&#xff0c;具体是否需要垃圾回收由JVM自行…