进度条
# 一、概述
进度条,可以用来显示数值,加载进度。
# 二、控件设置
控件设置包含如下部分,控件标题,尺寸,外观,属性,事件,选中尺寸,会列出尺寸对应设置细节,以下会对各部分功能分别介绍。
![设置1011.png](https://cos.easydoc.net/36623104/files/l315ho52.png)
## 控件标题
控件名称为了方便理解和记忆可以修改,如:LvglBar1修改为:LvglBar1_mytest。
![设置101.png](https://cos.easydoc.net/36623104/files/l30xdto7.png)
## 尺寸
包括排列方式,X,Y轴坐标,拖动控件会改变对应X,Y轴坐标,也可以手动设置。屏幕左上角为像素坐标原点(x=0,y=0)。
【排列】:支持。。。。等排列方式,(注:暂时未实现)
【宽度】:进度条宽度,可手动设置,也可以直接拖动修改
【高度】:进度条高度,可手动设置,也可以直接拖动修改
【X轴】:描述控件在屏幕上的像素X坐标位置,可手动设置,也可以直接拖动修改
【Y轴】:描述控件在屏幕上的像素Y坐标位置,可手动设置,也可以直接拖动修改
![设置002.png](https://cos.easydoc.net/36623104/files/l30xl59d.png)
## 外观
外观分为背景条,指示条,2部分。
### 背景条
背景条包括背景样式,内边距。
背景样式,可以设置背景颜色,不透明度(0-255)设置为0是表示完全透明,渐变色,渐变开始,渐变结束,渐变方向,混合默认,如下图所示:
![设置003.png](https://cos.easydoc.net/36623104/files/l30y5cdw.png)
内边距设置,可以设置上,下,左,右,内的边距。
![设置004.png](https://cos.easydoc.net/36623104/files/l30y9b6b.png)
### 指示条
指示条只可以设置背景样式,背景样式见上述描述。
![设置005.png](https://cos.easydoc.net/36623104/files/l30ycayj.png)
## 属性
属性包含外观类型(普通,对称,自定义)和数据(开始值,当前值,值区间,动画时长)2部分。
![设置006.png](https://cos.easydoc.net/36623104/files/l3119znw.png)
## 事件
包含单击,按下,按住,取消按下,轻击,长按,持续长按,抬起常规事件。每种事件包含函数和屏幕2个选项。
![设置007.png](https://cos.easydoc.net/36623104/files/l311ew7u.png)
# 三、使用详解
## 打开UI设计器
首先先创建一个UI工程,这个不做说明,参考前面的快速入门新建工程章节,然后点击UI设计器按钮进入UI设计界面。
![image.png](https://cos.easydoc.net/36623104/files/l311lpxd.png)
## 添加进度条
首先点击添加组件按钮,会出现一个下拉菜单,然后选择进度条图标,点击确认。
![image.png](https://cos.easydoc.net/36623104/files/l315ky5h.png)
![使用101.png](https://cos.easydoc.net/36623104/files/l315tuop.png)
## 控件名称修改
控件名称可以修改用户需要的,方便用户理解,同时会自动生成对应的代码。
![使用102.png](https://cos.easydoc.net/36623104/files/l316p571.png)
## 尺寸设置
可以通过设置X,Y轴坐标设置控件位置,也可以手动拖拽标签放到合适的位置,坐标会自动变化,屏幕左上角为像素坐标原点(x=0,y=0)。宽度和高度都可以设置。
![使用103.png](https://cos.easydoc.net/36623104/files/l31cy97a.png)
## 外观设置
外观设置分为背景条,指示条2部分,点击编辑进入对应设置界面,点击清除删除对应设置。
### 背景条
背景条部分包含背景样式,内边距,2部分,点击编辑进入对应设置界面,点击清除删除对应设置。
背景条样式,可以设置背景颜色,不透明度,渐变色,渐变开始值,渐变结束值,渐变方向,混合模式。
![使用104.png](https://cos.easydoc.net/36623104/files/l31a288l.png)
内边距设置,可以设置上,下,左,右,内的边距
![使用105.png](https://cos.easydoc.net/36623104/files/l31a2wiw.png)
### 指示条
指示条可以修改背景样式,点击编辑进入对应设置界面,点击清除删除对应设置。
![使用106.png](https://cos.easydoc.net/36623104/files/l31a3yzl)
## 属性设置
属性包含外观类型(普通,对称,自定义)和数据(开始值,当前值,值区间,动画时长)2部分。
![使用107.png](https://cos.easydoc.net/36623104/files/l31a7qja)
## 运行效果
通过上面外观和属性设置后,实际运行效果如下所示:
![使用108.png](https://cos.easydoc.net/36623104/files/l31a994u.png)
## 事件设置
包含单击,按下,按住,取消按下,轻击,长按,持续长按,抬起常规事件,每种事件包含函数和屏幕2个选项。
![使用109.png](https://cos.easydoc.net/36623104/files/l31b3d6w.png)
### 函数控制
改变事件选择函数,输入对应的函数名,在UiDesign.lua会自动生成,注册改变事件的消息回调函数,UiHandle.lua会自动生成对应空函数。用户自已添加需要实现功能,这里添加一个打印来演示效果。
![使用110.png](https://cos.easydoc.net/36623104/files/l31b5149.png)
![使用111.png](https://cos.easydoc.net/36623104/files/l31b5bqq.png)
### 屏幕切换
首先添加一个新屏幕用来演示用,改变事件选择屏幕,选择新建的mytest屏幕,在UiDesign.lua会自动生成,注册单击事件的消息回调函数,运行模拟器后单击进度条,会切换到刚才创建的mytest屏幕。
![使用112.png](https://cos.easydoc.net/36623104/files/l31cthge)
# 四、操作视频