滑块

# 一、概述 滑块看起来和进度条是有些是有些像,但不同的是滑块可以进行数值选择。 # 二、控件设置 控件设置包含如下部分,控件标题,尺寸,外观,属性,事件,选中尺寸,会列出尺寸对应设置细节,以下会对各部分功能分别介绍。 ![设置001.png](https://cos.easydoc.net/36623104/files/l28svysf.png) ## 控件标题 控件名称为了方便理解和记忆可以修改,如:LvglSlider1修改为:LvglSlider1_mytest。 ![设置101.png](https://cos.easydoc.net/36623104/files/l28tx5v1.png) ## 尺寸 包括排列方式,X,Y轴坐标,拖动控件会改变对应X,Y轴坐标,也可以手动设置。屏幕左上角为像素坐标原点(x=0,y=0)。 【排列】:支持。。。。等排列方式,(注:暂时未实现) 【宽度】:滑块宽度,可手动设置,也可以直接拖动修改 【高度】:滑块高度,可手动设置,也可以直接拖动修改 【X轴】:描述控件在屏幕上的像素X坐标位置,可手动设置,也可以直接拖动修改 【Y轴】:描述控件在屏幕上的像素Y坐标位置,可手动设置,也可以直接拖动修改 ![属性002.png](https://cos.easydoc.net/36623104/files/l28tzkrc.png) ## 外观 外观分为背景,指示器,控制柄3部分。 ![属性003.png](https://cos.easydoc.net/36623104/files/l28u6obc.png) ### 背景 背景包括背景样式,内边距。 背景样式,可以设置背景颜色,不透明度(0-255)设置为0是表示完全透明,渐变色如下图所示。 ![设置004.png](https://cos.easydoc.net/36623104/files/l28ve5au.png) 内边距设置,可以设置上,下,左,右,内的边距。 ![设置005.png](https://cos.easydoc.net/36623104/files/l28vh7ld.png) ### 指示器 指示器只可以设置背景样式,背景样式见上述描述。 ![设置006.png](https://cos.easydoc.net/36623104/files/l28vn3t1.png) ### 控制柄 控制柄也包括背景样式,内边距,详细描述见上面背景部分描述。 ![设置007.png](https://cos.easydoc.net/36623104/files/l28vp7k3.png) ## 属性 属性包含数据(当前值,值区间)和其它(外观类型,动画时长,控制柄模式)2部分。 ![设置008.png](https://cos.easydoc.net/36623104/files/l28vt05i.png) ## 事件 事件包含键盘右箭头,键盘左箭头,改变,每种事件包含函数和屏幕2个选项。 ![设置009.png](https://cos.easydoc.net/36623104/files/l29r3yfu.png) # 三、使用详解 ## 打开UI设计器 首先先创建一个UI工程,这个不做说明,参考前面的快速入门新建工程章节,然后点击UI设计器按钮进入UI设计界面。 ![使用101.png](https://cos.easydoc.net/36623104/files/l29rm602.png) ## 添加滑块 首先点击添加组件按钮,会出现一个下拉菜单,然后选择滑块图标,点击确认。 ![使用102.png](https://cos.easydoc.net/36623104/files/l29rpqc1.png) ![使用100.png](https://cos.easydoc.net/36623104/files/l29r8t8i.png) ## 控件名称修改 控件名称可以修改用户需要的,方便用户理解,同时会自动生成对应的代码。 ![使用103.png](https://cos.easydoc.net/36623104/files/l29tthdy) ## 尺寸设置 可以通过设置X,Y轴坐标设置控件位置,也可以手动拖拽标签放到合适的位置,坐标会自动变化,屏幕左上角为像素坐标原点(x=0,y=0)。宽度和高度都可以设置。 ![使用104.png](https://cos.easydoc.net/36623104/files/l29u5w5b) ## 外观设置 外观设置分为背景,指示器,控制柄3部分,点击编辑进入对应设置界面,点击清除删除对应设置。 ### 背景 背景部分包含背景样式,内边距,2部分,点击编辑进入对应设置界面,点击清除删除对应设置。 背景样式,可以设置背景颜色,不透明度,渐变色,渐变开始值,渐变结束值,渐变方向,混合模式。 ![使用105.png](https://cos.easydoc.net/36623104/files/l2a4tqqt) 内边距设置,可以设置上,下,左,右,内的边距。 ![使用106.png](https://cos.easydoc.net/36623104/files/l2a4utho) ### 指示器 指示器可以修改背景样式,点击编辑进入对应设置界面,点击清除删除对应设置。 ![使用107.png](https://cos.easydoc.net/36623104/files/l2a4zi50) ### 控制柄 控制柄部分包含背景样式,内边距,2部分,点击编辑进入对应设置界面,点击清除删除对应设置。 背景样式,可以设置背景颜色,不透明度,渐变色,渐变开始值,渐变结束值,渐变方向,混合模式。 ![使用108.png](https://cos.easydoc.net/36623104/files/l2a51x3f) 内边距设置,可以设置上,下,左,右,内的边距。 ![使用109.png](https://cos.easydoc.net/36623104/files/l2a53aox) ## 属性设置 属性包含数据(当前值,值区间)和其它(外观类型,动画时长,控制柄模式)2部分。 ![使用110.png](https://cos.easydoc.net/36623104/files/l2a561zx) ## 运行效果 通过上面外观和属性设置后,实际运行效果如下所示: ![使用111.png](https://cos.easydoc.net/36623104/files/l2a575aj.png) ## 事件设置 包含键盘右箭头,键盘左箭头,改变,每种事件包含函数和屏幕2个选项。 ![使用112.png](https://cos.easydoc.net/36623104/files/l2a58y6u.png) ### 函数控制 改变事件选择函数,输入对应的函数名,在UiDesign.lua会自动生成,注册改变事件的消息回调函数,UiHandle.lua会自动生成对应空函数。用户自已添加需要实现功能,这里添加一个打印当前值的打印来演示效果。 ![使用113.png](https://cos.easydoc.net/36623104/files/l2a5c6lu) 运行模拟器后,拖动控制柄,修改当前值,可以看到打印结果也会同步改变。 ![使用114.png](https://cos.easydoc.net/36623104/files/l2a5ce86.png) 屏幕切换 首先添加一个新屏幕用来演示用,改变事件选择屏幕,选择新建的mytest屏幕,在UiDesign.lua会自动生成,注册改变事件的消息回调函数,运行模拟器后拖动控制柄后,会切换到刚才创建的mytest屏幕。 ![使用115.png](https://cos.easydoc.net/36623104/files/l2a5xqvk) # 四、操作视频