Toggle（复选框）组件

Toggle 是一个 CheckBox，当它和 ToggleGroup 一起使用的时候，可以变成 RadioButton。

创建 Toggle 组件

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

节点说明

Toggle 组件的节点树一般为：

注：checkmark 在层级结构上要在 Background 上面，或者是 Background 的子节点。

属性介绍

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

Toggle Transition 部分

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

Color Transition

Sprite Transition

Scale Transition

Toggle 点击事件

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

通过属性检查器添加回调

1.编写回调函数脚本：

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

2.编写好后将 toggle.js 挂在到 Toggle 节点下：

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

4.预览游戏，勾选 Toggle 发现控制台正常打印出刚才输入的字符串，取消勾选 Toggle 发现控制台没有打印任何内容，说明成功调用回调函数：

通过脚本添加回调

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

方法一：

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

1.编写脚本如下：

// toggle.js
​
cc.Class({
    extends: cc.Component,
​
    properties: {
    },
​
    // LIFE-CYCLE CALLBACKS:
​
    onLoad() {
        var checkEventHandler = new cc.Component.EventHandler();
        checkEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点
        checkEventHandler.component = "toggle"
        checkEventHandler.handler = "cb_toggle";
        checkEventHandler.customEventData = "小明";
​
        var toggle = this.node.getComponent(cc.Toggle);
        toggle.checkEvents.push(checkEventHandler);
    },
​
    start() {
​
    },
​
    // update (dt) {},
​
    // toggle 回调函数
    cb_toggle(toggle, customEventData) {
        // toggle 为 toggle 本身
        if (toggle.isChecked) {
            console.log("Hello," + customEventData + "!");
        }
    }
});

2.编写好后将 toggle.js 挂在到 Toggle 节点下，预览游戏，勾选 Toggle 发现控制台正常打印出刚才输入的字符串，取消勾选 Toggle 发现控制台没有打印任何内容，说明成功调用回调函数：

方法二：

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

1.编写脚本如下：

// toggle.js
​
cc.Class({
    extends: cc.Component,
​
    properties: {
    },
​
    // LIFE-CYCLE CALLBACKS:
​
    onLoad() {
        this.node.on('toggle', this.cb_toggle, this);
    },
​
    start() {
​
    },
​
    // update (dt) {},
​
    // toggle 回调函数
    cb_toggle(toggle) {
        // toggle 为 toggle 本身
        if (toggle.isChecked) {
            console.log("Hello,小明!");
        }
    }
});

2.编写好后将 toggle.js 挂在到 Toggle 节点下，预览游戏，勾选 Toggle 发现控制台正常打印出刚才输入的字符串，取消勾选 Toggle 发现控制台没有打印任何内容，说明成功调用回调函数：

拓展：

除了默认的资源，还可以替换 Background 和 Checkmate 图片资源实现开关效果：

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