1. 相关知识点

Toggle 是一个 CheckBox，当它和 ToggleGroup 一起使用的时候，可以变成 RadioButton。也就是经常用到的选择、多选按钮

1.1 Toggle 属性

属性	功能说明
isChecked	布尔类型，如果这个设置为 true，则 check mark 组件会处于 enabled 状态，否则处于 disabled 状态。
checkMark	cc.Sprite 类型，Toggle 处于选中状态时显示的图片
toggleGroup	cc.ToggleGroup 类型， Toggle 所属的 ToggleGroup，这个属性是可选的。如果这个属性为 null，则 Toggle 是一个 CheckBox，否则，Toggle 是一个 RadioButton。
Check Events	列表类型，默认为空，用户添加的每一个事件由节点引用，组件名称和一个响应函数组成。详情见Toggle 事件章节

注意：因为 Toggle 继承至 Button。

1.2 Toggle 事件

属性	功能说明
Target	带有脚本组件的节点
Component	脚本组件名称
Handler	指定一个回调函数，当`Toggle`的事件发生的时候会调用此函数
CustomEventData	用户指定任意的字符串作为事件回调的最后一个参数传入

Toggle事件的回调参数有两个：第一个是Toggle本身，第二个参数是customEventData。

1.3 Toggle详细说明

Toggle的节点树：

官方文档中说要将checkmark放到Background节点上面。

注意： 在层级结构上面要将checkmark放到Background节点上面，或者在Background添加一个checkmark的子节点。

1.4 ToggleContainer

它并不是一个可见的UI组件，他可以用来修改一组Toggle组件的行为。当一组Toggle属于同一个ToggleContainer的时候，任何时候只能有有一个Toggle处于选中状态。（togglegroup新版已经弃用）

属性	功能说明
allowSwitchOff	如果这个值设置为true，那么toggle按钮在被点击的时候可以反复地被选中和未选中。

2. 步骤

2.1 单个toggle

直接在属性检查器中选择你的回调方法

在脚本文件中创建好你的方法回调，在 属性检查器 中选择你的回调函数。

cc.Class({
    extends: cc.Component,
    properties: {
    },
    callback(toggle, customEventData) {
        alert("Toggle1 " + customEventData);
    },
    start () {
    },
});

2.2 ToggleContainer

直接新建UI节点->ToggleContainer，我们允许它重复选择，将allowSwitchOff勾选。

3. 总结

事实上，toggle事件添加有很多方式

方法一纯代码添加回调
方法二通过 toggle.node.on(‘toggle’, …) 的方式来添加
方法三用代码获取UI控件
方法四直接在属性检查器中选择你的回调方法

对于现在写好了的回调函数已经够用了，所以一般使用最后一种方式。

本教程部分素材来源于网络。

上传的附件 cocos creator 第九课.zip ( 212.15kb, 18次下载 )

【Cocos Creator实战教程(9)】——UI组件（3）Toggle 组件