Cocos Creator (Toggle组件详解)

前言

Toggle 是一个 CheckBox,他可以与 ToggleGroup/ToggleContainer 一起使用,也就是多项单选按钮。

Toggle 组件

Toggle组件

点击 属性检查器 下面的 添加组件 按钮,然后选择 UI组件 中的 Toggle,即可将 Toggle 组件 添加至节点。

想要查看 Toggle组件 的API,请点击这里,这里截取部分 Toggle组件 的API用作说明。
·
·
·

Toggle 的属性

属性(properties)说明
target Node需要过渡的目标。(所选目标,一般为本身添加Toggle组件,所以目标为本身Node节点)
interactable Boolean按钮事件是否被响应,如果为 false,则按钮将被禁用,无法点击。
enableAutoGrayEffect Boolean如果设置为 true,当 Toggleinteractable 属性为 false 的时候,会使用内置 shaderToggletarget 节点的 sprite 组件变灰。
transition Button.Transition按钮状态改变时过渡方式。 NONE:点击时无过渡效果, COLOR:点击时进行颜色变化, SPRITE: 点击时更改精灵图,SCALE:点击时改变按钮的大小。
isChecked Boolean如果设置为 true,则 check mark 组件会处于 enabled 状态,否则处于 disabled 状态。
checkMark SpriteToggle 处于选中状态时显示的图片。
toggleGroup ToggleGroupToggle 所属的 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监听)

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);
	    },
	});
	
欢迎留言交流技术
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页