Toggle（復選框）組件

Toggle 是一個 CheckBox，當它和 ToggleGroup 一起使用的時候，可以變成 RadioButton。

創(chuàng)建 Toggle 組件

層級管理器右擊->創(chuàng)建節(jié)點->創(chuàng)建 UI 節(jié)點->Toggle 即可創(chuàng)建 Toggle 組件。

節(jié)點說明

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

注：checkmark 在層級結構上要在 Background 上面，或者是 Background 的子節(jié)點。

屬性介紹

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

Toggle Transition 部分

Toggle 的 Transition 用來指定當用戶點擊 Toggle 時的狀態(tài)表現(xiàn)。目前主要有 NONE，COLOR，SPRITE 和 SCALE。

Color Transition

Sprite Transition

Scale Transition

Toggle 點擊事件

Toggle 可以額外添加 Check 事件，用于響應玩家的點擊操作。有以下兩種方法。

通過屬性檢查器添加回調

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

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

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

3.設置 Check Events 為 1，并將 Toggle 節(jié)點拖到帶有 cc.node 的編輯框，后面分別選擇對應的腳本和方法，CustomEventData 處輸入要打印的字符串：

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

通過腳本添加回調

通過腳本添加回調有以下兩種方式：

方法一：

這種方法添加的事件回調和使用編輯器添加的事件回調是一樣的，都是通過 Toggle 組件實現(xiàn)。首先需要構造一個 cc.Component.EventHandler 對象，然后設置好對應的 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; // 這個 node 節(jié)點是你的事件處理代碼組件所屬的節(jié)點
        checkEventHandler.component = "toggle"
        checkEventHandler.handler = "cb_toggle";
        checkEventHandler.customEventData = "小明";
?
        var toggle = this.node.getComponent(cc.Toggle);
        toggle.checkEvents.push(checkEventHandler);
    },
?
    start() {
?
    },
?
    // update (dt) {},
?
    // toggle 回調函數(shù)
    cb_toggle(toggle, customEventData) {
        // toggle 為 toggle 本身
        if (toggle.isChecked) {
            console.log("Hello," + customEventData + "!");
        }
    }
});

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

方法二：

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

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

拓展：

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

我是「Super于」，立志做一個每天都有正反饋的人！