UI 组件 | Button

最近在与其他自学 Cocos Creator 的小伙伴们交流过程中，发现许多小伙伴对基础组件的应用并不是特别了解，自己在编写游戏的过程中也经常对某个属性或者方法的用法所困扰，而网上也没有比较清晰的用法讲解，所以准备对常用的 UI 组件常用用法进行一个总结，方便自己和其他小伙伴们查看，下面正文开始（注：属性介绍部分大部分内容我会取自官方文档）。

---

Button（按钮）组件

Button 组件可以响应用户的点击操作，当用户点击 Button 时，Button 自身会有状态变化。另外，Button 还可以让用户在完成点击操作后响应一个自定义的行为。

创建 Button 组件

层级管理器右击->创建节点->创建 UI 节点->Button 即可创建 Button 组件。

属性介绍

创建成功后，属性面板可以看到 Button 组件特有的属性，下面对这些属性一一介绍：

属性	功能说明
Target	Node 类型，当 Button 发生 Transition 的时候，会相应地修改 Target 节点的 SpriteFrame，颜色或者 Scale。
interactable	布尔类型，设为 false 时，则 Button 组件进入禁用状态。
Transition	枚举类型，包括 NONE, COLOR，SPRITE 和 SCALE。每种类型对应不同的 Transition 设置。详情见下方的 Button Transition 部分。
Click Event	列表类型，默认为空，用户添加的每一个事件由节点引用，组件名称和一个响应函数组成。详情见下方的 Button 事件 部分。

Button Transition 部分

Button 的 Transition 用来指定当用户点击 Button 时的状态表现。目前主要有 NONE，COLOR，SPRITE 和 SCALE。

 

Color Transition

属性	功能说明
Normal	Button 在 Normal 状态下的颜色。
Pressed	Button 在 Pressed 状态下的颜色。
Hover	Button 在 Hover 状态下的颜色。
Disabled	Button 在 Disabled 状态下的颜色。
Duration	Button 状态切换需要的时间间隔。

Sprite Transition

属性	功能说明
Normal	Button 在 Normal 状态下的 SpriteFrame。
Pressed	Button 在 Pressed 状态下的 SpriteFrame。
Hover	Button 在 Hover 状态下的 SpriteFrame。
Disabled	Button 在 Disabled 状态下的 SpriteFrame。

Scale Transition

属性	功能
Duration	Button 状态切换需要的时间间隔。
ZoomScale	当用户点击按钮后，按钮会缩放到一个值，这个值等于 Button 原始 scale * zoomScale, zoomScale 可以为负数

Button 点击事件

Button 可以额外添加 Click 事件，用于响应玩家的点击操作。有以下两种方法。

通过属性检查器添加回调

序号	属性	功能说明
1	Target	带有脚本组件的节点。
2	Component	脚本组件名称。
3	Handler	指定一个回调函数，当用户点击 Button 时会触发此函数。
4	CustomEventData	用户指定任意的字符串作为事件回调的最后一个参数传入。

1.编写回调函数脚本：

 // button.js
 ​
 cc.Class({
     extends: cc.Component,
 ​
     properties: {
     },
 ​
     // LIFE-CYCLE CALLBACKS:
 ​
     // onLoad () {},
 ​
     start () {
 ​
     },
 ​
     // update (dt) {},
 ​
     // button 回调函数
     cb_button(event, customEventData){
         console.log("Hello," + customEventData + "!");
     }
 });

2.编写好后将 button.js 挂在到 Button 节点下：

3.设置 Click Events 为 1，并将 Button 节点拖到带有 cc.node 的编辑框，后面分别选择对应的脚本和方法，CustomEventData 处输入要打印的字符串：

4.预览游戏，点击 Button 按钮发现控制台正常打印出刚才输入的字符串，说明成功调用回调函数：

通过脚本添加回调

通过脚本添加回调有以下两种方式：

方法一：

这种方法添加的事件回调和使用编辑器添加的事件回调是一样的，都是通过 Button 组件实现。首先需要构造一个 cc.Component.EventHandler 对象，然后设置好对应的 target、component、handler 和 customEventData 参数。

1.编写脚本如下：

 // button.js
 ​
 cc.Class({
     extends: cc.Component,
 ​
     properties: {
     },
 ​
     // LIFE-CYCLE CALLBACKS:
 ​
     onLoad() {
         var clickEventHandler = new cc.Component.EventHandler();
         clickEventHandler.target = this.node;    // 这个 node 节点是你的事件处理代码组件所属的节点
         clickEventHandler.component = "button";    // 这个是代码文件名
         clickEventHandler.handler = "cb_button";
         clickEventHandler.customEventData = "小明";
 ​
         var button = this.node.getComponent(cc.Button);
         button.clickEvents.push(clickEventHandler);
     },
 ​
     start() {
 ​
     },
 ​
     // update (dt) {},
 ​
     // button 回调函数
     cb_button(event, customEventData) {
         // 这里 event 是一个 Event 对象，你可以通过 event.target 取到事件的发送节点
         var node = event.target;
         var button = this.node.getComponent(cc.Button);
         // 这里的 customEventData 参数就等于你之前设置的 "foobar"
         console.log("Hello," + customEventData + "!");
     }
 });

2.编写好后将 button.js 挂在到 Button 节点下，预览游戏，点击 Button 按钮发现控制台正常打印出刚才输入的字符串，说明成功调用回调函数：

方法二：

通过 button.node.on('click', ...) 的方式来添加，这是一种非常简便的方式，但是该方式有一定的局限性，在事件回调里面无法获得当前点击按钮的屏幕坐标点，也无法传递 customEventData。

1.编写脚本如下：

 // button.js
 ​
 cc.Class({
     extends: cc.Component,
 ​
     properties: {
     },
 ​
     // LIFE-CYCLE CALLBACKS:
 ​
     onLoad() {
         this.node.on('click', this.cb_button, this);
     },
 ​
     start() {
 ​
     },
 ​
     // update (dt) {},
 ​
     // button 回调函数
     cb_button(button) {
         console.log("Hello,小明！");
     }
 });

2.编写好后将 button.js 挂在到 Button 节点下，预览游戏，点击 Button 按钮发现控制台正常打印出刚才输入的字符串，说明成功调用回调函数：

拓展：

动态修改 Button 图片

1.新建 Button 组件，并设置初始默认图片：

2.编写脚本如下：

 // button.js
 ​
 cc.Class({
     extends: cc.Component,
 ​
     properties: {
         buttonBool:true,
     },
 ​
     // LIFE-CYCLE CALLBACKS:
 ​
     onLoad() {
         this.node.on('click', this.cb_button, this);
     },
 ​
     start() {
 ​
     },
 ​
     // update (dt) {},
 ​
     // button 回调函数
     cb_button(button) {
         console.log("Hello,小明！");
 ​
         var button = this.node.getComponent(cc.Button);
         if(this.buttonBool == true){
             cc.loader.loadRes("off", cc.SpriteFrame, function (err, spriteFrame) {
                 button.normalSprite = spriteFrame;
                 button.pressedSprite = spriteFrame;
                 button.hoverSprite = spriteFrame;
             });
 ​
             this.buttonBool = false;
         }else{
             cc.loader.loadRes("on", cc.SpriteFrame, function (err, spriteFrame) {
                 button.normalSprite = spriteFrame;
                 button.pressedSprite = spriteFrame;
                 button.hoverSprite = spriteFrame;
             });
 ​
             this.buttonBool = true;
         }
     }
 });

3.将脚本挂载到 Button 组件上并运行，可以看到点击按钮时可以改变按钮的贴图：

---

我是「Super于」，立志做一个每天都有正反馈的人！

​