Toggle（复选框）组件
Toggle 是一个 CheckBox，当它和 ToggleGroup 一起使用的时候，可以变成 RadioButton。
创建 Toggle 组件
层级管理器右击->创建节点->创建 UI 节点->Toggle 即可创建 Toggle 组件。
节点说明
Toggle 组件的节点树一般为：
注：checkmark 在层级结构上要在 Background 上面，或者是 Background 的子节点。
属性介绍
创建成功后，属性面板可以看到 Toggle 组件特有的属性，下面对这些属性一一介绍：
| 属性 | 功能说明 |
|---|---|
| Target | Node 类型，当 Toggle 发生 Transition 的时候，会相应地修改 Target 节点的 SpriteFrame，颜色或者 Scale。 |
| interactable | 布尔类型，设为 false 时，则 Toggle 组件进入禁用状态。 |
| Transition | 枚举类型，包括 NONE, COLOR，SPRITE 和 SCALE。每种类型对应不同的 Transition 设置。详情见下方的 Toggle Transition 部分。 |
| isChecked | 布尔类型，如果这个设置为 true，则 check mark 组件会处于 enabled 状态，否则处于 disabled 状态。 |
| checkMark | cc.Sprite 类型，Toggle 处于选中状态时显示的图片。 |
| toggleGroup | cc.ToggleGroup 类型， Toggle 所属的 ToggleGroup，这个属性是可选的。如果这个属性为 null，则 Toggle 是一个 CheckBox，否则，Toggle 是一个 RadioButton。 |
| Check Events | 列表类型，默认为空，用户添加的每一个事件由节点引用，组件名称和一个响应函数组成。详情见下方的 Toggle 事件 部分。 |
Toggle Transition 部分
Toggle 的 Transition 用来指定当用户点击 Toggle 时的状态表现。目前主要有 NONE，COLOR，SPRITE 和 SCALE。
Color Transition
| 属性 | 功能说明 |
|---|---|
| Normal | Toggle 在 Normal 状态下的颜色。 |
| Pressed | Toggle 在 Pressed 状态下的颜色。 |
| Hover | Toggle 在 Hover 状态下的颜色。 |
| Disabled | Toggle 在 Disabled 状态下的颜色。 |
| Duration | Toggle 状态切换需要的时间间隔。 |
Sprite Transition
| 属性 | 功能说明 |
|---|---|
| Normal | Toggle 在 Normal 状态下的 SpriteFrame。 |
| Pressed | Toggle 在 Pressed 状态下的 SpriteFrame。 |
| Hover | Toggle 在 Hover 状态下的 SpriteFrame。 |
| Disabled | Toggle 在 Disabled 状态下的 SpriteFrame。 |
Scale Transition
| 属性 | 功能 |
|---|---|
| Duration | Toggle 状态切换需要的时间间隔。 |
| ZoomScale | 当用户点击按钮后，按钮会缩放到一个值，这个值等于 Toggle 原始 scale * zoomScale, zoomScale 可以为负数 |
Toggle 点击事件
Toggle 可以额外添加 Check 事件，用于响应玩家的点击操作。有以下两种方法。
通过属性检查器添加回调
| 序号 | 属性 | 功能说明 |
|---|---|---|
| 1 | Target | 带有脚本组件的节点。 |
| 2 | Component | 脚本组件名称。 |
| 3 | Handler | 指定一个回调函数，当用户点击 Toggle 时会触发此函数。 |
| 4 | CustomEventData | 用户指定任意的字符串作为事件回调的最后一个参数传入。 |
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于」，立志做一个每天都有正反馈的人！
网友评论