UI組件 | Toggle

Toggle（複選框）組件

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

創建 Toggle 組件

層級管理器右擊->創建節點->創建 UI 節點->Toggle 即可創建 Toggle 組件。

節點說明

Toggle 組件的節點樹一般爲：

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

屬性介紹

創建成功後，屬性面板可以看到 Toggle 組件特有的屬性，下面對這些屬性一一介紹：

屬性	功能說明
Target	Node 類型，當 Toggle 發生 Transition 的時候，會相應地修改 Target 節點的 SpriteFrame，顏色或者 Scale。
interactable	布爾類型，設爲 false 時，則 Toggle 組件進入禁用狀態。
Transition‍	枚舉類型，包括 NONE, COLOR，SPRITE 和 SCALE。每種類型對應不同的 Transition 設置。詳情見下方的 Toggle Transition 部分。
isChecked	布爾類型，如果這個設置爲 true，則 check mark 組件會處於 enabled 狀態，否則處於 disabled 狀態。
checkMark	cc.Sprite 類型，Toggle 處於選中狀態時顯示的圖片。
toggleGroup	cc.ToggleGroup 類型， Toggle 所屬的 ToggleGroup，這個屬性是可選的。如果這個屬性爲 null，則 Toggle 是一個 CheckBox，否則，Toggle 是一個 RadioButton。
Check Events	列表類型，默認爲空，用戶添加的每一個事件由節點引用，組件名稱和一個響應函數組成。詳情見下方的 Toggle 事件 部分。

Toggle Transition 部分

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

Color Transition

屬性	功能說明
Normal	Toggle 在 Normal 狀態下的顏色。
Pressed	Toggle 在 Pressed 狀態下的顏色。
Hover	Toggle 在 Hover 狀態下的顏色。
Disabled	Toggle 在 Disabled 狀態下的顏色。
Duration	Toggle 狀態切換需要的時間間隔。

Sprite Transition

屬性	功能說明
Normal	Toggle 在 Normal 狀態下的 SpriteFrame。
Pressed	Toggle 在 Pressed 狀態下的 SpriteFrame。
Hover	Toggle 在 Hover 狀態下的 SpriteFrame。
Disabled	Toggle 在 Disabled 狀態下的 SpriteFrame。

Scale Transition

屬性	功能
Duration	Toggle 狀態切換需要的時間間隔。
ZoomScale	當用戶點擊按鈕後，按鈕會縮放到一個值，這個值等於 Toggle 原始 scale * zoomScale, zoomScale 可以爲負數

Toggle 點擊事件

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

通過屬性檢查器添加回調

序號	屬性	功能說明
1	Target	帶有腳本組件的節點。
2	Component	腳本組件名稱。
3	Handler	指定一個回調函數，當用戶點擊 Toggle 時會觸發此函數。
4	CustomEventData	用戶指定任意的字符串作爲事件回調的最後一個參數傳入。

1.編寫回調函數腳本：

// toggle.js


cc.Class({
    extends: cc.Component,


    properties: {
    },


    // LIFE-CYCLE CALLBACKS:


    // onLoad () {},


    start() {


    },


    // update (dt) {},


    // toggle 回調函數
    cb_toggle(toggle, customEventData) {  
        if(toggle.isChecked){
            console.log("Hello," + customEventData + "!");
        }       
    }
});

2.編寫好後將 toggle.js 掛在到 Toggle 節點下：

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

4.預覽遊戲，勾選 Toggle 發現控制檯正常打印出剛纔輸入的字符串，取消勾選 Toggle 發現控制檯沒有打印任何內容，說明成功調用回調函數：

通過腳本添加回調

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

方法一：

這種方法添加的事件回調和使用編輯器添加的事件回調是一樣的，都是通過 Toggle 組件實現。首先需要構造一個 cc.Component.EventHandler 對象，然後設置好對應的 target、component、handler 和 customEventData 參數。

1.編寫腳本如下：

// toggle.js


cc.Class({
    extends: cc.Component,


    properties: {
    },


    // LIFE-CYCLE CALLBACKS:


    onLoad() {
        var checkEventHandler = new cc.Component.EventHandler();
        checkEventHandler.target = this.node; // 這個 node 節點是你的事件處理代碼組件所屬的節點
        checkEventHandler.component = "toggle"
        checkEventHandler.handler = "cb_toggle";
        checkEventHandler.customEventData = "小明";


        var toggle = this.node.getComponent(cc.Toggle);
        toggle.checkEvents.push(checkEventHandler);
    },


    start() {


    },


    // update (dt) {},


    // toggle 回調函數
    cb_toggle(toggle, customEventData) {
        // toggle 爲 toggle 本身
        if (toggle.isChecked) {
            console.log("Hello," + customEventData + "!");
        }
    }
});

2.編寫好後將 toggle.js 掛在到 Toggle 節點下，預覽遊戲，勾選 Toggle 發現控制檯正常打印出剛纔輸入的字符串，取消勾選 Toggle 發現控制檯沒有打印任何內容，說明成功調用回調函數：

方法二：

通過 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 回調函數
    cb_toggle(toggle) {
        // toggle 爲 toggle 本身
        if (toggle.isChecked) {
            console.log("Hello,小明!");
        }
    }
});

2.編寫好後將 toggle.js 掛在到 Toggle 節點下，預覽遊戲，勾選 Toggle 發現控制檯正常打印出剛纔輸入的字符串，取消勾選 Toggle 發現控制檯沒有打印任何內容，說明成功調用回調函數：

拓展：

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

---

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