Toggle（復(fù)選框）組件

Toggle 是一個(gè) CheckBox悯辙，當(dāng)它和 ToggleGroup 一起使用的時(shí)候，可以變成 RadioButton注盈。

創(chuàng)建 Toggle 組件

層級(jí)管理器右擊->創(chuàng)建節(jié)點(diǎn)->創(chuàng)建 UI 節(jié)點(diǎn)->Toggle 即可創(chuàng)建 Toggle 組件撇吞。

節(jié)點(diǎn)說明

Toggle 組件的節(jié)點(diǎn)樹一般為：

注：checkmark 在層級(jí)結(jié)構(gòu)上要在 Background 上面，或者是 Background 的子節(jié)點(diǎn)探熔。

屬性介紹

創(chuàng)建成功后，屬性面板可以看到 Toggle 組件特有的屬性烘挫，下面對(duì)這些屬性一一介紹：

Toggle Transition 部分

Toggle 的 Transition 用來指定當(dāng)用戶點(diǎn)擊 Toggle 時(shí)的狀態(tài)表現(xiàn)沽瞭。目前主要有 NONE，COLOR剩瓶，SPRITE 和 SCALE驹溃。

Color Transition

Sprite Transition

Scale Transition

Toggle 點(diǎn)擊事件

Toggle 可以額外添加 Check 事件宦焦，用于響應(yīng)玩家的點(diǎn)擊操作。有以下兩種方法顿涣。

通過屬性檢查器添加回調(diào)

1.編寫回調(diào)函數(shù)腳本：

// toggle.js
?
cc.Class({
    extends: cc.Component,
?
    properties: {
    },
?
    // LIFE-CYCLE CALLBACKS:
?
    // onLoad () {},
?
    start() {
?
    },
?
    // update (dt) {},
?
    // toggle 回調(diào)函數(shù)
    cb_toggle(toggle, customEventData) {  
        if(toggle.isChecked){
            console.log("Hello," + customEventData + "!");
        }       
    }
});

2.編寫好后將 toggle.js 掛在到 Toggle 節(jié)點(diǎn)下：

3.設(shè)置 Check Events 為 1锌唾，并將 Toggle 節(jié)點(diǎn)拖到帶有 cc.node 的編輯框锄码，后面分別選擇對(duì)應(yīng)的腳本和方法，CustomEventData 處輸入要打印的字符串：

4.預(yù)覽游戲晌涕，勾選 Toggle 發(fā)現(xiàn)控制臺(tái)正常打印出剛才輸入的字符串，取消勾選 Toggle 發(fā)現(xiàn)控制臺(tái)沒有打印任何內(nèi)容痛悯，說明成功調(diào)用回調(diào)函數(shù)：

通過腳本添加回調(diào)

通過腳本添加回調(diào)有以下兩種方式：

方法一：

這種方法添加的事件回調(diào)和使用編輯器添加的事件回調(diào)是一樣的余黎，都是通過 Toggle 組件實(shí)現(xiàn)。首先需要構(gòu)造一個(gè) cc.Component.EventHandler 對(duì)象载萌，然后設(shè)置好對(duì)應(yīng)的 target惧财、component、handler 和 customEventData 參數(shù)扭仁。

1.編寫腳本如下：

// toggle.js
?
cc.Class({
    extends: cc.Component,
?
    properties: {
    },
?
    // LIFE-CYCLE CALLBACKS:
?
    onLoad() {
        var checkEventHandler = new cc.Component.EventHandler();
        checkEventHandler.target = this.node; // 這個(gè) node 節(jié)點(diǎn)是你的事件處理代碼組件所屬的節(jié)點(diǎn)
        checkEventHandler.component = "toggle"
        checkEventHandler.handler = "cb_toggle";
        checkEventHandler.customEventData = "小明";
?
        var toggle = this.node.getComponent(cc.Toggle);
        toggle.checkEvents.push(checkEventHandler);
    },
?
    start() {
?
    },
?
    // update (dt) {},
?
    // toggle 回調(diào)函數(shù)
    cb_toggle(toggle, customEventData) {
        // toggle 為 toggle 本身
        if (toggle.isChecked) {
            console.log("Hello," + customEventData + "!");
        }
    }
});

2.編寫好后將 toggle.js 掛在到 Toggle 節(jié)點(diǎn)下垮衷，預(yù)覽游戲，勾選 Toggle 發(fā)現(xiàn)控制臺(tái)正常打印出剛才輸入的字符串乖坠，取消勾選 Toggle 發(fā)現(xiàn)控制臺(tái)沒有打印任何內(nèi)容搀突，說明成功調(diào)用回調(diào)函數(shù)：

方法二：

通過 toggle.node.on('toggle', ...) 的方式來添加，這是一種非常簡便的方式熊泵，但是該方式有一定的局限性仰迁，在事件回調(diào)里面無法獲得當(dāng)前點(diǎn)擊按鈕的屏幕坐標(biāo)點(diǎn)甸昏，也無法傳遞 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 回調(diào)函數(shù)
    cb_toggle(toggle) {
        // toggle 為 toggle 本身
        if (toggle.isChecked) {
            console.log("Hello,小明!");
        }
    }
});

2.編寫好后將 toggle.js 掛在到 Toggle 節(jié)點(diǎn)下徐许，預(yù)覽游戲施蜜，勾選 Toggle 發(fā)現(xiàn)控制臺(tái)正常打印出剛才輸入的字符串，取消勾選 Toggle 發(fā)現(xiàn)控制臺(tái)沒有打印任何內(nèi)容雌隅，說明成功調(diào)用回調(diào)函數(shù)：

拓展：

除了默認(rèn)的資源翻默，還可以替換 Background 和 Checkmate 圖片資源實(shí)現(xiàn)開關(guān)效果：

我是「Super于」，立志做一個(gè)每天都有正反饋的人恰起！