虚拟键盘
# 一、概述
Keyboard对象是特殊的 按钮矩阵(lv_imgbtn) ,具有预定义的按键映射和其他功能,以实现虚拟键盘来编写文本。需要配合输入文字控件一起使用。
# 二、控件设置
控件设置包含如下部分,控件标题,尺寸,外观,属性,事件,选中尺寸,会列出尺寸对应设置细节,以下会对各部分功能分别介绍。
![100.png](https://cos.easydoc.net/36623104/files/l4586cpn.png)
## 控件标题
控件名称为了方便理解和记忆可以修改,如:LvglKeyboard1修改为:LvglKeyboard1_mytest。
![101.png](https://cos.easydoc.net/36623104/files/l456w8p1.png)
## 尺寸
包括排列方式,X,Y轴坐标,拖动控件会改变对应X,Y轴坐标,也可以手动设置。屏幕左上角为像素坐标原点(x=0,y=0)。
【排列】:支持。。。。等排列方式,(注:暂时未实现)
【宽度】:虚拟键盘宽度,可手动设置,也可以直接拖动修改
【高度】:虚拟键盘高度,可手动设置,也可以直接拖动修改
【X轴】:描述控件在屏幕上的像素X坐标位置,可手动设置,也可以直接拖动修改
【Y轴】:描述控件在屏幕上的像素Y坐标位置,可手动设置,也可以直接拖动修改
![002.png](https://cos.easydoc.net/36623104/files/l456yq6q.png)
## 外观
外观部件分为背景,按键2部分。
### 背景
背景可以设置背景样式。
#### 背景样式
背景样式,可以设置背景颜色,不透明度(0-255)设置为0是表示完全透明,渐变色,渐变开始,渐变结束,渐变方向,混合模式,如下图所示:
![003.png](https://cos.easydoc.net/36623104/files/l45768lg.png)
### 按键
按键包含背景样式,文字样式2部分。
背景样式和上面的背景里的背景样式一样,这个不做说明。
#### 文字样式
文字样式,可以设置文本颜色、字体、字号大小等。(默认支持宋体16号,如果要支持黑体,得保证你的硬件设备上有矢量字库芯片,否则设置黑体后会显示不了相应的文字内容),如下图所示:
![004.png](https://cos.easydoc.net/36623104/files/l457cpjn.png)
## 属性
属性包含关联文本框,文本框隐藏键盘,控制输入光标,按键类型4个部分。
![005.png](https://cos.easydoc.net/36623104/files/l457ge8s.png)
## 事件
包含单击,按下,按住,取消按下,轻击,长按,持续长按,抬起,改变,回车,取消,每种事件包含函数和屏幕2个选项。
![006.png](https://cos.easydoc.net/36623104/files/l457ndt2.png)
# 三、使用详解
## 打开UI设计器
首先先创建一个UI工程,这个不做说明,参考前面的快速入门新建工程章节,然后点击UI设计器按钮进入UI设计界面。
![image.png](https://cos.easydoc.net/36623104/files/l457ocmo.png)
## 添加虚拟键盘
首先点击添加组件按钮,会出现一个下拉菜单,然后选择虚拟键盘图标,点击确认。
![image.png](https://cos.easydoc.net/36623104/files/l457pt57.png)
![0100.png](https://cos.easydoc.net/36623104/files/l4581u6y.png)
## 控件名称修改
控件名称可以修改用户需要的,方便用户理解,同时会在UiDesign.lua脚本文件里自动生成对应的代码。
![101.png](https://cos.easydoc.net/36623104/files/l458hpyr)
## 尺寸设置
可以通过设置X,Y轴坐标设置控件位置,也可以手动拖拽标签放到合适的位置,坐标会自动变化,屏幕左上角为像素坐标原点(x=0,y=0)。宽度和高度都可以设置。
![102.png](https://cos.easydoc.net/36623104/files/l458u1h1.png)
## 外观设置
外观分为背景,按键2部分,点击编辑进入对应设置界面,点击清除删除对应设置。
![103.png](https://cos.easydoc.net/36623104/files/l4592fk0.png)
### 背景
背景只包含背景样式,背景样式,可以设置背景颜色,不透明度,渐变色,渐变开始值,渐变结束值,渐变方向,混合模式。点击编辑进入对应设置界面,点击清除删除对应设置。
![104.png](https://cos.easydoc.net/36623104/files/l47r7wvr)
### 按键
按键包含背景样式,文字样式2部分,点击编辑进入对应设置界面,点击清除删除对应设置。
背景样式设置如下图所示:
![105.png](https://cos.easydoc.net/36623104/files/l459kohy)
文字样式设置如下所示:
![106.png](https://cos.easydoc.net/36623104/files/l459o3h8.png)
## 属性设置
属性设置包含关联文本框,文本框隐藏键盘,控制输入光标,按键类型4个部分。这个我们需要创建一个LvglTextarea1输入文字控件与其相关联。
![107.png](https://cos.easydoc.net/36623104/files/l45b3oax)
## 运行效果
通过上面外观和属性设置后,默认虚拟键盘是隐藏状态,点击输入框后,虚拟键盘会显示出来,可操作虚拟键盘输入对应内容,点对号确认键虚拟键盘会被隐藏。实际运行效果如下所示:
![108.png](https://cos.easydoc.net/36623104/files/l45bhq7m.png)
## 事件设置
包含单击,按下,按住,取消按下,轻击,长按,持续长按,抬起,改变,回车,取消,每种事件包含函数和屏幕2个选项。设置这个事件后,输入文本内容操作将会失效,正常情况不建议做这样操作。直接用默认生成的消息回调函数处理就好。
### 函数控制
这里我们把虚拟键盘,关联到LvglTextarea1文本框上(需先创建输入文本,在创建虚拟键盘,否侧模拟器运行后,无任何内容显示),在UiDesign.lua脚本里会自动注册lvgl_UiDesigner_DefInCb,lvgl_UiDesigner_DefOutCb消息处理函数,这里我们在添加一个文字插入的消息处理,来打印输入文字的内容。和点击应用按钮后,打印输入文字的内容来做演示。
![109.png](https://cos.easydoc.net/36623104/files/l46f72ci.png)
### 屏幕切换
首先添加一个新屏幕用来演示用,点击事件选择屏幕,选择新建的mytest屏幕,在UiDesign.lua会自动生成,注册点击事件的消息回调函数,运行模拟器后点击虚拟键盘后,会切换到刚才创建的mytest屏幕。
![110.png](https://cos.easydoc.net/36623104/files/l46fqek5)
# 四、操作视频