按钮

# 一、概述 按钮是简单的矩形对象,可以启用它以在单击时自动进入对应操作。 # 二、控件设置 控件设置包含如下部分,控件标题,尺寸,外观,属性,事件,选中尺寸,会列出尺寸对应设置细节,以下会对各部分功能分别介绍。 ![设置100.png](https://cos.easydoc.net/36623104/files/l3i2pgu7.png) ## 控件标题 控件名称为了方便理解和记忆可以修改,如:LvglButton1修改为:LvglButton1_mytest。 ![设置002.png](https://cos.easydoc.net/36623104/files/l3i2s7wy.png) ## 尺寸 包括排列方式,X,Y轴坐标,拖动控件会改变对应X,Y轴坐标,也可以手动设置。屏幕左上角为像素坐标原点(x=0,y=0)。 【排列】:支持。。。。等排列方式,(注:暂时未实现) 【宽度】:按钮宽度,可手动设置,也可以直接拖动修改 【高度】:按钮高度,可手动设置,也可以直接拖动修改 【X轴】:描述控件在屏幕上的像素X坐标位置,可手动设置,也可以直接拖动修改 【Y轴】:描述控件在屏幕上的像素Y坐标位置,可手动设置,也可以直接拖动修改 ![设置003.png](https://cos.easydoc.net/36623104/files/l3idicpb.png) ## 外观 外观分为状态,背景,文本样式,边框,轮廓,阴影,圆角,过渡8部分。 ### 状态 ![设置005.png](https://cos.easydoc.net/36623104/files/l3idwlc3.png) ### 背景 背景包括背景样式。背景样式,可以设置背景颜色,不透明度(0-255)设置为0是表示完全透明,渐变色,渐变开始,渐变结束,渐变方向,混合模式,如下图所示: ![设置006.png](https://cos.easydoc.net/36623104/files/l3idyuxg.png) ### 文本样式 文字样式,可以设置文本颜色、字体、字号大小等。(默认支持宋体16号,如果要支持黑体,得保证你的硬件设备上有矢量字库芯片,否则设置黑体后会显示不了相应的文字内容)。 ![设置008.png](https://cos.easydoc.net/36623104/files/l3ie8s6g.png) ### 边框 边框包括边框颜色,不透明度,边框宽度,绘制边,最后绘制,混合模式,如下图所示: ![设置007.png](https://cos.easydoc.net/36623104/files/l3ie3p1m.png) ### 轮廓 轮廓包括线条颜色,不透明度,轮廓线宽,边距,混合模式,如下图所示: ![设置009.png](https://cos.easydoc.net/36623104/files/l3iecn4c.png) ### 阴影 阴影包括阴影颜色,不透明度,模糊宽度(值越大越模糊),X轴位移,Y轴位移,扩展,混合模式,如下图所示: ![设置010.png](https://cos.easydoc.net/36623104/files/l3ieewr5.png) ### 圆角 圆角可以通过加减,来调节圆角弧度,如下图所示: ![设置111.png](https://cos.easydoc.net/36623104/files/l3if0p25.png) ### 过渡 过渡包括过渡时长,延迟,过渡属性,如下图所示: ![设置012.png](https://cos.easydoc.net/36623104/files/l3if3cs8.png) ## 属性 属性包含文字内容输入,如下图所示: ![设置014.png](https://cos.easydoc.net/36623104/files/l3ifb7ba.png) ## 事件 包含单击,按下,按住,取消按下,轻击,长按,持续长按,抬起,改变常规事件,如下图所示: ![设置015.png](https://cos.easydoc.net/36623104/files/l3ifexn7.png) # 三、使用详解 ## 打开UI设计器 首先先创建一个UI工程,这个不做说明,参考前面的快速入门新建工程章节,然后点击UI设计器按钮进入UI设计界面。 ![image.png](https://cos.easydoc.net/36623104/files/l3iflqwv.png) ## 添加按钮 首先点击添加组件按钮,会出现一个下拉菜单,然后选择按钮图标,点击确认。 ![image.png](https://cos.easydoc.net/36623104/files/l3ifjuo3.png) ![使用001.png](https://cos.easydoc.net/36623104/files/l3ifpjx8.png) ## 控件名称修改 控件名称可以修改用户需要的,方便用户理解,同时会自动生成对应的代码。 ![使用101.png](https://cos.easydoc.net/36623104/files/l3ig0jx3) ## 尺寸设置 可以通过设置X,Y轴坐标设置控件位置,也可以手动拖拽标签放到合适的位置,坐标会自动变化,屏幕左上角为像素坐标原点(x=0,y=0)。宽度和高度都可以设置。 ![使用102.png](https://cos.easydoc.net/36623104/files/l3igat95) ## 外观设置 外观分为状态,背景,文本样式,边框,轮廓,阴影,圆角,过渡8部分,点击编辑进入对应设置界面,点击清除删除对应设置。 ### 状态 这里选默认状态设置做演示效果。 ![使用103.png](https://cos.easydoc.net/36623104/files/l3jgnf3y) ### 背景 背景部分只包含背景样式,点击编辑进入对应设置界面,点击清除删除对应设置。 背景样式,可以设置背景颜色,不透明度,渐变色,渐变开始值,渐变结束值,渐变方向,混合模式。 ![使用104.png](https://cos.easydoc.net/36623104/files/l3jgw0y4) ### 文字样式 文本样式设置,包含文本颜色,不透明度,字体,字号,粗细度,字间距,行间距,修饰符,选中文字颜色,点击编辑进入对应设置界面,点击清除删除对应设置。 ![使用105.png](https://cos.easydoc.net/36623104/files/l3jh9scz) ### 边框 边框设置,包含边框颜色,不透明度,边框宽度,绘制边,最后绘制,混合默认。点击编辑进入对应设置界面,点击清除删除对应设置。 ![使用106.png](https://cos.easydoc.net/36623104/files/l3jhmylk) ### 轮廓 轮廓设置,包括线条颜色,不透明度,轮廓线宽,边距,混合模式。点击编辑进入对应设置界面,点击清除删除对应设置。 ![使用107.png](https://cos.easydoc.net/36623104/files/l3jjlv7u) ### 阴影 阴影设置,包括阴影颜色,不透明度,模糊宽度(值越大越模糊),X轴位移,Y轴位移,扩展,混合模式。点击编辑进入对应设置界面,点击清除删除对应设置。 ![使用108.png](https://cos.easydoc.net/36623104/files/l3jjnf80) ### 圆角 圆角设置,可以通过加减,来调节圆角弧度,值越大,圆角弧度越大。 ![使用109.png](https://cos.easydoc.net/36623104/files/l3jjrasf.png) ## 属性设置 属性设置,设置按钮上显示的文本内容。 ![使用110.png](https://cos.easydoc.net/36623104/files/l3jjt0ww) ## 运行效果 通过上面外观和属性设置后,实际运行效果如下所示: ![使用112.png](https://cos.easydoc.net/36623104/files/l3jju3x9.png) ## 事件设置 事件包含单击,按下,按住,按住,轻击,长按,持续长按,抬起,改变每种事件包含函数和屏幕2个选项。 ![使用113.png](https://cos.easydoc.net/36623104/files/l3jly30e.png) ### 函数控制 点击事件选择函数,输入对应的函数名,在UiDesign.lua会自动生成,注册点击事件的消息回调函数,UiHandle.lua会自动生成对应空函数。用户自已添加需要实现功能,这里添加一个打印来演示效果。 ![使用114.png](https://cos.easydoc.net/36623104/files/l3jlznne.png) 模拟器运行后,点击按钮会出现如下打印。 ![使用115.png](https://cos.easydoc.net/36623104/files/l3jm03f7.png) ### 屏幕切换 首先添加一个新屏幕用来演示用,点击事件选择屏幕,选择新建的mytest屏幕,在UiDesign.lua会自动生成,注册点击事件的消息回调函数,运行模拟器后点击按钮后,会切换到刚才创建的mytest屏幕。 ![使用116.png](https://cos.easydoc.net/36623104/files/l3jqfay7) # 四、操作视频