效果圖
引言
Toggle 是一個 CheckBox，當它和 ToggleGroup 一起使用的時候，可以變成 RadioButton。也就是經(jīng)常用到的選擇、多選按鈕
toggle 組件
點擊 屬性檢查器 下面的 添加組件 按鈕，然后從 添加 UI 組件 中選擇 Toggle，即可添加 Toggle 組件到節(jié)點上。
Toggle 的腳本接口請參考Toggle API。
Toggle 屬性
| 屬性 | 功能說明 |
|---|---|
| isChecked | 布爾類型，如果這個設(shè)置為 true，則 check mark 組件會處于 enabled 狀態(tài)，否則處于 disabled 狀態(tài)。 |
| checkMark | cc.Sprite 類型，Toggle 處于選中狀態(tài)時顯示的圖片 |
| toggleGroup | cc.ToggleGroup 類型， Toggle 所屬的 ToggleGroup，這個屬性是可選的。如果這個屬性為 null，則 Toggle 是一個 CheckBox，否則，Toggle 是一個 RadioButton。 |
| Check Events | 列表類型，默認為空，用戶添加的每一個事件由節(jié)點引用，組件名稱和一個響應(yīng)函數(shù)組成。詳情見Toggle 事件章節(jié) |
注意：因為 Toggle 繼承至 Button，所以關(guān)于 Toggle 的 Button 相關(guān)屬性的詳細說明和用法請參考 Button 組件對應(yīng)的章節(jié)，這里就不再贅述了。
Toggle 事件
| 屬性 | 功能說明 |
|---|---|
| Target | 帶有腳本組件的節(jié)點 |
| Component | 腳本組件名稱 |
| Handler | 指定一個回調(diào)函數(shù)，當Toggle的事件發(fā)生的時候會調(diào)用此函數(shù) |
| CustomEventData | 用戶指定任意的字符串作為事件回調(diào)的最后一個參數(shù)傳入 |
Toggle事件的回調(diào)參數(shù)有兩個： 第一個是Toggle本身，第二個參數(shù)是customEventData。
Toggle詳細說明
Toggle的節(jié)點樹：
官方文檔中說要將checkmark放到Background節(jié)點上面，這句話咋一聽沒毛病，但是總覺的有點不太恰當。
注意： 在層級結(jié)構(gòu)上面要將checkmark放到Background節(jié)點上面，或者在Background添加一個checkmark的子節(jié)點。
代碼添加回調(diào)關(guān)聯(lián)UI
方法一 （純代碼添加回調(diào)）
這種方法添加的事件回調(diào)和使用編輯器添加的事件回調(diào)是一樣的，通過代碼添加， 你需要首先構(gòu)造一個 cc.Component.EventHandler 對象，然后設(shè)置好對應(yīng)的 target, component, handler 和 customEventData 參數(shù)。
官方實例
cc.Class({
extends: cc.Component,
properties: {
toggle :{
type: cc.Toggle,
default: null
}
},
onLoad () {
var checkEventHandler = new cc.Component.EventHandler();
checkEventHandler.target = this.node; //這個 node 節(jié)點是你的事件處理代碼組件所屬的節(jié)點
checkEventHandler.component = "ToggleScript1";
checkEventHandler.handler = "callback";
checkEventHandler.customEventData = "success";
this.toggle.checkEvents.push(checkEventHandler);
},
callback: function(toggle, customEventData) {
//這里 toggle 是 事件發(fā)出的 Toggle 組件
//這里的 customEventData 參數(shù)就等于你之前設(shè)置的 "foobar"
console.log("toggle1 " + customEventData);
alert("toggle1 " + customEventData);
},
});
將該腳本添加到Toggle1節(jié)點上面，如圖：
方法二
通過 toggle.node.on('toggle', ...) 的方式來添加
cc.Class({
extends: cc.Component,
properties: {
toggle: cc.Toggle
},
onLoad: function () {
this.toggle.node.on('toggle', this.callback, this);
},
callback: function (event) {
var toggle = event;
//do whatever you want with toggle
if(toggle.isChecked){
console.log("toggle2 YES");
alert("toggle2 YES");
}else{
console.log("toggle2 NO");
alert("toggle2 NO");
}
}
});
當然也必須將腳本添加到節(jié)點上面，并將創(chuàng)建的Toggle2拖拽到你的腳本屬性上面
方法三用代碼獲取UI控件
這種方法只能獲取到當前的node中的UI控件，并且該控件有且只有一個
cc.Class({
extends: cc.Component,
properties: {
},
onLoad () {
var checkEventHandler = new cc.Component.EventHandler();
checkEventHandler.target = this.node; //這個 node 節(jié)點是你的事件處理代碼組件所屬的節(jié)點
checkEventHandler.component = "ToggleScript3";
checkEventHandler.handler = "callback";
checkEventHandler.customEventData = "success";
var toggle = this.node.getComponent(cc.Toggle);
toggle.checkEvents.push(checkEventHandler);
},
callback: function(toggle, customEventData) {
console.log("toggle3 " + customEventData);
alert("toggle3 " + customEventData);
},
});
這種方法的好處是，只要將腳本文件添加到你的節(jié)點上面，就能直接關(guān)聯(lián)相關(guān)的方法回調(diào)。
注意： 該腳本文件必須添加到你的目標控件的節(jié)點上面，比如說： 你創(chuàng)建了一個Button控件，那么就必須將腳本文件添加到你的這個Button控件上面。
方法四，直接在屬性檢查器中選擇你的回調(diào)方法
在腳本文件中創(chuàng)建好你的方法回調(diào)，在 屬性檢查器 中選擇你的回調(diào)函數(shù)。
cc.Class({
extends: cc.Component,
properties: {
},
callback(toggle, customEventData) {
alert("Toggle4 " + customEventData);
},
start () {
},
});
個人博客 ： 玩溜Cocos Creator入門學(xué)習(xí)（七）UI系統(tǒng)介紹UI組件（Toggle）
