前言
Toggle
是一个 CheckBox
,他可以与 ToggleGroup/ToggleContainer
一起使用,也就是多项单选按钮。
Toggle 组件
点击 属性检查器 下面的 添加组件
按钮,然后选择 UI组件 中的 Toggle
,即可将 Toggle 组件 添加至节点。
想要查看 Toggle组件 的API,请点击这里,这里截取部分 Toggle组件 的API用作说明。
·
·
·
Toggle 的属性
属性(properties) | 说明 |
---|---|
target Node | 需要过渡的目标。(所选目标,一般为本身添加Toggle 组件,所以目标为本身Node 节点) |
interactable Boolean | 按钮事件是否被响应,如果为 false ,则按钮将被禁用,无法点击。 |
enableAutoGrayEffect Boolean | 如果设置为 true ,当 Toggle 的 interactable 属性为 false 的时候,会使用内置 shader 让 Toggle 的 target 节点的 sprite 组件变灰。 |
transition Button.Transition | 按钮状态改变时过渡方式。 NONE: 点击时无过渡效果, COLOR: 点击时进行颜色变化, SPRITE: 点击时更改精灵图,SCALE: 点击时改变按钮的大小。 |
isChecked Boolean | 如果设置为 true ,则 check mark 组件会处于 enabled 状态,否则处于 disabled 状态。 |
checkMark Sprite | Toggle 处于选中状态时显示的图片。 |
toggleGroup ToggleGroup | Toggle 所属的 ToggleGroup ,这个属性是可选的。配合旧版单选组件 ToggleGroup 使用 |
checkEvents Component.EventHandler[] | Toggle 按钮的点击事件列表。 |
Toggle 的点击事件
属性 | 功能说明 |
---|---|
target | 带有脚本组件所在的节点 |
component | 绑定脚本组件的名称 |
handler | 指定一个方法为绑定的回调方法,填写方法名即可 |
customEventData | 用户指定任意的字符串作为事件回调的最后一个参数传入 |
如果想要进行代码绑定,可以自定义事件进行绑定,也可直接在属性面板上进行拖拽绑定。
TestMgr.js
let check = new cc.Component.EventHandler(); // 创建一个新的事件回调
check.target = this.node; // 绑定回调方法所在的节点
check.component = "TestMgr"; // 绑定回调方法所在的脚本名字
check.handler = "OnValueChanged"; // 绑定的回调方法的名字
check.customEventData = "changed"; // 绑定的回调方法的参数
OnValueChanged : function ( toggle, customEventData ){}
Toggle事件的回调参数有两个: 第一个是 Toggle
本身,第二个参数是 customEventData
。
·
Toggle 的回调绑定 (由简入繁)
·
方法一(属性检查器中直接拖拽想要绑定的方法)
拖拽绑定,将带有Toggle方法的脚本节点拖入对应Toggle的CheckEvents中,可以自定义回调参数。
(缺点,灵活性与可拓展性太差,团队越大代码量越多,维护起来越难。如果功能唯一也可以,不太推荐)
cc.Class({
extends: cc.Component,
properties: {},
ToggleMgr.js ==> // 要注意,回调自定义参数的类型为 String
ToggleEvent: function ( toggleSelf, customEventData )
{ // 回调参数1就是toggle本身,参数2为自定义数据("check this toggle") }
});
·
方法二(Node监听)
将要绑定方法的Toogle节点拖拽至ToggleMgr属性检查器中的Toggle属性上。
通过node监听方式绑定toggle方法。
四个监听参数(监听类型,监听回调方法,执行监听回调方法的目标,触发阶段(一般来说不需要设置))
(缺点,作者自认为)此方法不支持传递回调自定义参数。
cc.Class({
extends: cc.Component,
properties: { toggle: cc.Toggle },
onLoad: function () {
this.toggle.node.on('toggle', this.ToggleEvent, this);
},
ToggleMgr.js==>
ToggleEvent: function (event) {
var toggle = event;
if(toggle.isChecked) console.log("toggle is checked");
else console.log("toggle is unchecked");
}
});
·
方法三(代码添加回调)
·
将 ToggleItem.js 添加至目标Toggle节点上。 脚本在加载时将会自动绑定监听。
(优点,只要将脚本添加至目标节点上,就直接绑定了事件监听。)
(缺点,当toggle数量过多时,在场景中占用的内存也会增大)
ToggleItem.js ==> cc.Class({
extends: cc.Component,
properties: {},
onLoad () {
let check = new cc.Component.EventHandler();// 创建一个新的事件处理
check.target = this.node; // 绑定回调方法所在的节点
check.component = "ToggleItem"; // 绑定回调方法所在的脚本名字
check.handler = "OnValueChanged"; // 绑定的回调方法的名字
check.customEventData = "Changed"; // 绑定的回调方法的参数
let toggle = this.node.getComponent(cc.Toggle);
if (toggle){
toggle.checkEvents = []; // 清空toggle的回调事件列表
toggle.checkEvents.push(check); // 将方法绑定到指定toggle
}
},
OnValueChanged: function(toggle, customEventData) {
if(toggle.isChecked) console.log(customEventData);
},
});
·
方法四(统一代码添加回调)
将Toggle相关方法统一放置在ToggleMgr.js 管理类中进行管理。
ToggleMgr.js ==> cc.Class({
extends: cc.Component,
properties: { race: [cc.Toggle], power: [cc.Toggle], _race:[],_power:[] },
onLoad () {
this._race = ["Genie","Skeleton","Terran"];
this._power = ["100-120","90-140","110-130"];
this.AddListener( this.race, this._race, "RaceChanged" );
this.AddListener( this.power, this._power , "PowerChanged" );
},
AddListener: function( toggles, datas, func ) {
if( toggles ){
let length = toggles.length;
let _length = this.datas.length;
for(let i= 0; i< length; i++){
if(i<_length){
let check = new cc.Component.EventHandler();// 创建一个新的事件处理
check.target = this.node; // 绑定回调方法所在的节点
check.component = "ToggleMgr"; // 绑定回调方法所在的脚本名字
check.handler = func; // 绑定的回调方法的名字
check.customEventData = this.datas[i]; // 绑定的回调方法的参数
this.toggles[i].checkEvents = []; // 清空 toggle 回调事件列表
this.toggles[i].checkEvents.push(check); // 将方法绑定到指定 toggle
}
}
}
}
RaceChanged: function(toggle, customEventData) {
if(toggle.isChecked) console.log("Now, you're a ", customEventData);
},
PowerChanged: function(toggle, customEventData) {
if(toggle.isChecked) console.log("You choose ",customEventData);
},
});