选择框
# 一、概述
复选框 (Checkbox) 对象是从“勾选框”和标签创建的。当 Chackbox 被点击时,勾选框被切换。让用户选择内容,或者同意用户协议。
# 二、控件设置
控件设置包含如下部分,控件标题,尺寸,外观,属性,事件,选中尺寸,会列出尺寸对应设置细节,以下会对各部分功能分别介绍。
![100.png](https://cos.easydoc.net/36623104/files/l46rmz5t.png)
## 控件标题
控件名称为了方便理解和记忆可以修改,如:LvglCheckbox1修改为:LvglCheckbox1_mytest。
![101.png](https://cos.easydoc.net/36623104/files/l46s1o5q.png)
## 尺寸
包括排列方式,X,Y轴坐标,拖动控件会改变对应X,Y轴坐标,也可以手动设置。屏幕左上角为像素坐标原点(x=0,y=0)。
【排列】:支持。。。。等排列方式,(注:暂时未实现)
【宽度】:自动适应,不可手动修改
【高度】:自动适应,不可手动修改
【X轴】:描述控件在屏幕上的像素X坐标位置,可手动设置,也可以直接拖动修改
【Y轴】:描述控件在屏幕上的像素Y坐标位置,可手动设置,也可以直接拖动修改
![002.png](https://cos.easydoc.net/36623104/files/l46sep8h.png)
## 外观
外观包含状态,部件(背景,指示符),如下图所示:
![003.png](https://cos.easydoc.net/36623104/files/l46sjhrb.png)
### 状态
状态包括默认,按下,禁止,选择抬起,选择按下,选择禁止6种状态,如下所示:
![004.png](https://cos.easydoc.net/36623104/files/l46sm7t0.png)
### 部件
部件包含背景,指示符2个部分。背景又包含背景样式,文字样式2部分,指示符只包含背景样式部分。
#### 背景样式
背景样式,可以设置背景颜色,不透明度(0-255)设置为0是表示完全透明,渐变色,渐变开始,渐变结束,渐变方向,混合模式,如下图所示:
![005.png](https://cos.easydoc.net/36623104/files/l46sx5qu.png)
#### 文字样式
文字样式,可以设置文本颜色、字体、字号大小等。(默认支持宋体16号,如果要支持黑体,得保证你的硬件设备上有矢量字库芯片,否则设置黑体后会显示不了相应的文字内容),如下图所示:
![006.png](https://cos.easydoc.net/36623104/files/l46sz76r.png)
## 属性
属性包含文本,选中,禁止(开发后,点击选择框状态不会切换)3个部分。
![007.png](https://cos.easydoc.net/36623104/files/l46t4zer.png)
## 事件
包含单击,按下,按住,取消按下,轻击,长按,持续长按,抬起,改变,每种事件包含函数和屏幕2个选项。
![008.png](https://cos.easydoc.net/36623104/files/l46tze5n.png)
# 三、使用详解
## 打开UI设计器
首先先创建一个UI工程,这个不做说明,参考前面的快速入门新建工程章节,然后点击UI设计器按钮进入UI设计界面。
![image.png](https://cos.easydoc.net/36623104/files/l47q2p8b.png)
## 添加选择框
首先点击添加组件按钮,会出现一个下拉菜单,然后选择框图标,点击确认。
![image.png](https://cos.easydoc.net/36623104/files/l47q5dcv.png)
![100.png](https://cos.easydoc.net/36623104/files/l47q5n5c.png)
## 控件名称修改
控件名称可以修改用户需要的,方便用户理解,同时会在UiDesign.lua脚本文件里自动生成对应的代码。
![101.png](https://cos.easydoc.net/36623104/files/l47q6rzl.png)
## 尺寸设置
可以通过设置X,Y轴坐标设置控件位置,也可以手动拖拽标签放到合适的位置,坐标会自动变化,屏幕左上角为像素坐标原点(x=0,y=0)。宽度和高度是自带的,不可手动设置。
# 四、操作视频