一、控件介绍
Button 按钮
创建一个按钮
![](https://img-blog.csdnimg.cn/176dab5a1a97474e93cb8884d8dd1423.png)
按钮禁用
![](https://img-blog.csdnimg.cn/3f6f93bc683842228c548b9e2c7dd1c8.png)
精灵模式
![](https://img-blog.csdnimg.cn/cf4afc4d2f9b4b908af298887f727c28.png)
颜色模式
缩放模式
绑定点击事件
![](https://img-blog.csdnimg.cn/a3ff39e599c645088bdedeb158382f39.png)
EditBox 输入框
![](https://img-blog.csdnimg.cn/3d28d9912be94c4c959afaa50d89194c.png)
Layout 布局
支持水平排列、垂直排列、背包排列
![](https://img-blog.csdnimg.cn/3738422206f44533941cb739bba71a03.png)
PageView 页面视图
ProgressBar 进度条
![](https://img-blog.csdnimg.cn/b57cc3b1f7d94f3ea70f5cb4861c7278.png)
RichText 富文本
![](https://img-blog.csdnimg.cn/28db3d878ebf490eb3494d60932ef322.png)
绑定点击事件
![](https://img-blog.csdnimg.cn/0fcd014e84d340358e2efa2cf358797f.png)
![](https://img-blog.csdnimg.cn/95d82f37fdf846a1ac98918e4e1d9115.png)
事件可以被其它标签包裹
![](https://img-blog.csdnimg.cn/2b7496f959674aac96dd7ead6db7655e.png)
图文混排
ScrollView 滚动视图
content大小不要调整,加个layout布局组件让其自动撑开即可
案例1
![](https://img-blog.csdnimg.cn/14e3b560d2d3462185f2957689c204f7.png)
案例2
![](https://img-blog.csdnimg.cn/c46214ec44524faa9d3c0c44a0270678.png)
Slider 滑动器
![](https://img-blog.csdnimg.cn/8cc19327cf2a4f21a2a36ceb1c17aaa7.png)
Toggle 复选框
ToggleGroup 单选框
VidoPlayer 播放器
![](https://img-blog.csdnimg.cn/a492564b330f40b78433ab806b2c86c1.png)
WebView 网页视图
Widget 对齐
在不同的设备屏幕上让内容一直靠右上角进行适配
Mask 遮罩
![](https://img-blog.csdnimg.cn/6b43b65f4bb8497da350504edbc0c1f6.png)
托头像到空节点中
![](https://img-blog.csdnimg.cn/370f3a476eb74c72bf88b303f5709d2f.png)
给父组件添加遮罩组件
![](https://img-blog.csdnimg.cn/ed75a09a89c442ef98802c0d69202ea1.png)
效果
![](https://img-blog.csdnimg.cn/1579be43a920497da9a9e9b970c52411.png)
二、控件动画
创建动画片段
![](https://img-blog.csdnimg.cn/0b5653c63eb142dd9b97040100a3deb5.png)
![](https://img-blog.csdnimg.cn/06b1de6969ba41b58f5065b52f57020f.png)
制作动画正向
![](https://img-blog.csdnimg.cn/49470891b02c4f14b71e070f2cdf2299.png)
绑定动画播放完毕后要执行的脚本和传入的参数
制作反向动画
绑定使用动画
脚本控制动画
控制动画播放和显示对应图标
![](https://img-blog.csdnimg.cn/e96b91b5e30d419db5634a245dfd2158.png)
注意事项
默认不勾选
![](https://img-blog.csdnimg.cn/c797f114e6b249668e00ec9fa27c63b2.png)
绑定脚本
![](https://img-blog.csdnimg.cn/674003acc80e49bb88d093da07175516.png)
三、实战案例
使聊天框的内容跟随文字显示
![](https://img-blog.csdnimg.cn/e61e41d66b02480bbe251a9f201953ca.png)
![](https://img-blog.csdnimg.cn/3c4c8bf7ae0d4b17935c4e71eed55373.png)