Cocos Creator (Toggle组件详解)

前言

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);
	    },
	});
	

欢迎留言交流技术