鸿蒙开发:自定义一个车牌省份简称键盘

前言

之前针对车牌省份简称键盘,在Android系统中搞过一个,当时使用的是组合View的形式,考虑到最后一个删除按钮单独占两个格子,做了特殊处理,单独设置了权重weight和单独设置了宽度width,既然鸿蒙系统的应用开发了,于是比葫芦画瓢,把Android版的车牌键盘,用鸿蒙再封装一下。

鸿蒙搞起来就比较的简单,直接一个Grid组件便可以搞定,最后的删除按钮,使用布局选项GridLayoutOptions便可轻松实现。

本篇文章大致如下:

1、设置GridLayoutOptions,规划键盘摆放

2、设置属性和方法,制定可扩展效果

3、开源后的简单使用

4、使用总结

一、设置GridLayoutOptions,规划键盘摆放

我们最主要的是最后一行的删除按钮,让删除按钮独占两列,我们就可以这样设置GridLayoutOptions。

 layoutOptions: GridLayoutOptions = {regularSize: [1, 1],irregularIndexes: [this.mLicensePlateList.length - 1],onGetIrregularSizeByIndex: (_: number) => {return [1, 4]}}

regularSize:大小规则的GridItem在Grid中占的行数和列数,只支持占1行1列即[1, 1]。

最重要的参数是irregularIndexes和onGetIrregularSizeByIndex,irregularIndexes表示的是指定的GridItem索引在Grid中的大小是不规则的,比如我们设置的是最后一个格子,那么就把最后一个格子的索引设置上即可,当然,它是一个数组,在实际的开发中,可以动态的设置;onGetIrregularSizeByIndex是配合irregularIndexes使用,设置不规则GridItem占用的行数和列数,由于我们一行10个,最后一行时,最后是空出了4列,当然,这里我的处理是,直接最后一个占4列,然后在判断索引,设置删除按钮即可,当然,还有其它的处理方式。

首先,定义数据时,需要给数据增加一个空数据,用于最后一个元素的单独设置。

private mLicensePlateList = ["京", "津", "渝", "沪", "冀", "晋", "辽", "吉", "黑", "苏","浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘", "粤", "琼","川", "贵", "云", "陕", "甘", "青", "蒙", "桂", "宁", "新","藏", "使", "领", "学", "港", "澳", ""]

然后在ForEach遍历的时候,针对最后一个索引,单独设置删除按钮,非最后一个元素正常展示即可。

if (index == this.mLicensePlateList.length - 1) {Row() {Column() {Image(this.deleteIconSrc).width(this.deleteIconWidth)}.width(this.deleteWidth).height("100%").backgroundColor(Color.White).borderRadius(2).justifyContent(FlexAlign.Center)}.width("100%").height("100%").justifyContent(FlexAlign.End).onAreaChange((_: Area, newValue: Area) => {this.deleteWidth = Number(newValue.width) / 2 - Number(this.columnsGap) / 2})}

二、设置属性和方法,制定可扩展效果

如果仅仅只是自己使用,大可不必扩展,只适配自身应用即可,但是如果想要其他人或者其他应用进行使用,那么属性的扩展是很有必要的,毕竟每行展示几个,每个格子的背景,颜色、大小等等都是不一样的,我们可以把必须的这些因素,通过属性的形式暴露出去,尽量满足多需求的保障。

具体的各个属性,直接看第三项中的描述即可。

三、开源后的简单使用

1、远程依赖

方式一:在Terminal窗口中,执行如下命令安装三方包,DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

建议:在使用的模块路径下进行执行命令。

ohpm install @abner/keyboard

方式二:在工程的oh-package.json5中设置三方包依赖,配置示例如下:

"dependencies": { "@abner/keyboard": "^1.0.0"}

查看是否引用成功

无论使用哪种方式进行依赖,最终都会在使用的模块中,生成一个oh_modules文件,并创建源代码文件,有则成功,无则失败,如下:

2、快速使用

LicensePlateView({onItemClick: (item: string, index: number) => {//点击事件console.log("=====点击内容:" + item + "===点击索引:" + index)},onDelete: () => {//点击删除console.log("=====点击删除")}
})

属性介绍

属性

类型

概述

onItemClick

(item: string, index: number) => void

点击条目回调

onDelete

() => void

点击删除回调

onComplete

(item: string) => void

点击完成回调

rowsGap

Length

行间距

columnsGap

Length

列间距

columnSize

number

展示几列,默认是10列

bgColor

ResourceColor

背景颜色

marginLeft

Length

距离左边

marginRight

Length

距离右边

rectHeight

Length

每个格子高度

titleHeight

Length

标题栏高度

rootHeight

Length

键盘整体的高度

gridMarginTop

Length

网格距离顶部

gridMarginBottom

Length

网格距离底部

completeTextColor

ResourceColor

完成按钮的颜色

completeFontSize

number/string/ Resource

完成文字大小

isShowComplete

boolean

是否显示完成按钮

rectBgColor

ResourceColor

格子背景

rectSelectBgColor

ResourceColor

格子选中背景

rectBorderWidth

Length

格子边框宽度

rectBorderRadius

Length

格子圆角

rectBorderColor

ResourceColor

格子边框颜色

rectBorderSelectColor

ResourceColor

格子选中边框颜色

rectTextSize

Length

格子的文字大小

rectTextColor

Length

格子文字的默认颜色

rectSelectTextColor

ResourceColor

格子文字的选中颜色

prohibit

boolean

是否禁止后面的车牌简称

deleteIconWidth

Length

删除图片宽度

deleteIconSrc

PixelMap/ResourceStr/ DrawableDescriptor

删除icon资源

 

四、使用总结

目前的LicensePlateView只是一个组件,也就是一个View,你可以把它放到任何的UI布局中,比如自定义的页面,自定义的弹窗等等,当然了,后续,我也会扩展出类似于软键盘形式的弹出方式,可以关注下一个版本。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

电脑蓝屏不要慌,一分钟教你如何解决蓝屏问题

目录 一、检查硬件连接 二、更新驱动程序 三、修复操作系统错误 四、使用系统还原 电脑蓝屏是许多计算机用户经常遇到的问题之一。它可能由硬件故障、驱动程序问题、操作系统错误等多种原因引起。当电脑出现蓝屏时,很多人会感到困惑和焦虑。本文将向您介绍一些常见的解决方…

推荐!一些好用的VSCode插件

那些好用的VSCode插件 前言1、Auto Close Tag(自动补全标签)⭐2、Auto Rename Tag(自动更新标签)⭐3、Chinese(简体中文)⭐4、Git History (查看 Git 提交历史)⭐5、GitLens (增强 Git )6、open in browser (快速预览 )⭐7、Vetur ( Vue相关 )⭐8、Beautify ( 美化代码 )9、bac…

任务调度实现

我的后端学习大纲 XXL-JOB大纲 1、什么是任务调度 1.以下面业务场景就需要任务调度来解决问题: 某电商平台需要每天上午10点,下午3点,晚上8点发放一批优惠券某银行系统需要在信用卡到期还款日的前三天进行短信提醒某财务系统需要在每天凌晨0:10分结算前…

【SQL50】day 1

目录 1.可回收且低脂的产品 2.寻找用户推荐人 3.使用唯一标识码替换员工ID 4.产品销售分析 I 5.有趣的电影 6.平均售价 7.每位教师所教授的科目种类的数量 8.平均售价 1.可回收且低脂的产品 # Write your MySQL query statement below select product_id from Products w…

【数据结构与算法】第9课—数据结构之二叉树(链式结构)

文章目录 1. 二叉树的性质2. 链式结构二叉树3. 二叉树链式结构的4种遍历方式4. 二叉树节点个数5. 二叉树的叶子节点个数6. 二叉树第k层节点个数7. 二叉树的高度/深度8. 二叉树查找值为x的节点9. 二叉树的销毁10. 判断是否为完全二叉树11. 二叉树练习题11.1 单值二叉树11.2 相同…

ONLYOFFICE 8.2深度体验:高效协作与卓越性能的完美融合

📝个人主页🌹:Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀ONLYOFFICE 8.2 🔍引言📒1. ONLYOFFICE 产品简介📚2. 功能与特点🍁协作编辑 PDF🍂…

一文带你了解,全国职业院校技能大赛老年护理与保健赛项如何备赛

老年护理与保健,作为2023年全国职业院校技能大赛的新增赛项,紧密贴合党的二十大精神,致力于加速健康与养老产业的蓬勃发展,并深化医养康养结合的服务模式。此赛项不仅承载着立德树人的教育使命,更通过竞赛的引领作用&a…

HT71778 实时音频信号跟踪的18V,15A全集成同步升压转换器

1、特点 实时音频信号跟踪的电源供电 SN 短接地,VIN2.7~4.5V, VouT5V~12V RsN(to GND) 100k, ViN 2.7~8.5V, VouT 9V~15V SN 悬空,VIN 2.7~8.5V, VouT9V~18V 可编程峰值电流:15A 高转换效率: 93%(VIN7.4V, VoUT15.5V, IouT 1.5A) 低关断功耗,关断电流1uA 可调节的开…

二叉树 最大深度(递归)

给定一个二叉树 root ,返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1: 输入:root [3,9,20,null,null,15,7] 输出:3示例 2: 输入:root [1,null,2] 输出…

【Spring IoCDI】路径扫描,DI依赖注入

【路径扫描】 Spring注重路径,约定大于配置 例如,这个路径下,Spring默认会去扫描下【com.baiye.ioc】下面所有类中加了五大注解的路径,不在这个路径下是默认不会去扫描的 即:Spring默认的扫描路径是——启动类所在的目录及其子目…

JavaScript中变量的基础知识(超详细)

1.变量 1.1目标 理解变量是计算机存储数据的容器 变量:变量是计算机用来存储数据的容器(盒子)作用:记录计算机数据的不同状态注意:变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为一个用…

iPhone 17 :全系 120HZ,等等党终于等到了

苹果首次在 iPhone 13 Pro 上采用120 HZ 自适应高刷,通过屏幕体验,来拉开 Pro 和标准版的定位差距,这个策略持续到 iPhone 16。 不过从 iPhone 17 开始,情况要开始转变了。 根据外媒ETNews 的透露,苹果明年推出的四款…

【系统配置】信创终端操作系统如何彻底禁用ssh _ 统信 _ 麒麟 _ 方德

原文链接:【系统配置】信创终端操作系统如何彻底禁用ssh | 统信 | 麒麟 | 方德 Hello,大家好啊!今天带来一篇关于如何在信创终端操作系统中彻底禁用SSH的文章。在某些安全性要求较高的环境中,禁用SSH服务可以防止未经授权的远程访…

Ubuntu 18在线安装Docker 实战 2024年11月

Ubuntu 18在线安装Docker 实战 厂商:华为云 系统:Ubuntu 18.04 安装前原本以为国内直接安装会有魔法失效的问题,没有考虑直接用Docker 官方指引,找了各种帖子,各种国内源,结果一堆错,还把系统…

C语言-fseek函数

🌏个人博客:尹蓝锐的博客 希望文章能够给到初学的你一些启发~ 如果觉得文章对你有帮助的话,点赞 关注 收藏支持一下笔者吧~ fseek函数 int fseek ( FILE * stream, long int offset, int origin ); 重新定位流位置指示…

排序算法之插排希尔

算法时间复杂度(最好)时间复杂度(平均)时间复杂度(最差)空间复杂度插入排序O(n)O(n^2)O(n^2)1希尔排序O(n)O(n^1.3)O(n^2) 1 1.插入排序 玩牌时,每得到一张,就要把它插入…

babylonjs shader学习之shadertoy案例四

代码 const onSceneReady (scene: Scene) > {(scene.activeCamera as ArcRotateCamera).beta 1.185793134378305;const light new HemisphericLight(light, Vector3.Down(), scene);light.intensity 1;const plane MeshBuilder.CreatePlane(ground, { width: 10, heig…

【机器学习】20. RNN - Recurrent Neural Networks 和 LSTM

1. RNN定义 用于顺序数据 文本数据是序列数据的一个例子 句子是单词的序列——一个单词接另一个单词 每个句子可能有不同数量的单词(长度可变) 每个句子之间可能有长距离的依赖关系 rnn可以记住序列中较早的相关信息 RNN在每个时间点取序列中的1个…

python-读写Excel:openpyxl-(4)下拉选项设置

使用openpyxl库的DataValidation对象方法可添加下拉选择列表。 DataValidation参数说明: type: 数据类型("whole", "decimal", "list", "date", "time", "textLength", "custom"…

unity发布webGL

1.安装WebGL板块 打开unity,进入该界面,然后选择圈中图标 选择添加模块 选择下载WebGL Build Support 2.配置项目设置 打开一个unity项目,如图进行选择 如图进行操作 根据自己的情况进行配置(也可直接点击构建和运行&#xff09…