Toggle：选项组件（单选框，多选框），功能和button差不多，有时候我们会用Toggle组件代替Button组件；
 Toggle组件与Toggle Group组件：经常成对出现；
 toggle Group与Toggle属于父子关系，Toggle常作为Toggle Group组件的子物体，从来来实现单选和多选的效果 。
 
1、Toggle组件：首先我们在Panel下新建空物体GameObject，改名为Toggle Group；
 选中Toggle Group，右击在UI里添加Toggle组件，如图：
 2、展开Toggle组件，我们发现，他包含有两个image组件和一个Label(文本输入框)【Text】组件；
 Background：背景图片，控制toggle组件的背景颜色改变，从而展示此物体是否被选中的效果；
 Checkmark:就是我们界面看到的对号勾选框，对号图片可以替换，也可以删除不用。
 Label：text组件：文本输出框，我们可以在这里输入文字，说明这个Toggle的作用或名称；
 3、下面我们来看Toggle的菜单：
 前面讲过的不再重复；
 大多数菜单功能与Button类同；
 Is On：用来表示Toggle当前开关状态，勾选为开；
 Graphic：控制Toggle组件开关图片的显示隐藏，默认选取Checkmark;
 Group:这里放Toggle属于的开关组，在下面的Toggle Group中详细讲。
 4、Toggle：的添加事件：
 
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ToggleConllter : MonoBehaviour
{

    private Toggle toggle;//注册toggle组件
    // Start is called before the first frame update
    void Start()
    {
        //获取Toggle组件
        toggle = gameObject.GetComponent<Toggle>();
        //绑定按钮点击事件
        toggle.onValueChanged.AddListener(ison => print(ison?"开":"关")) ;
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}
 

 
 5、Toggle Group
 
 （1）在空物体上，如上图，添加Toggle Group组件；
 （2）
 下面我们来简单介绍一下Toggle Group组件；
 非常的简单，可以看到只有一个选项框：
 Allow Switch off：Allow Switch off处于选中状态，表示该物体的子物体都带有Toggle组件，且每次只有一个Toggle可以处于被选中状态（也就是单选状态）；
 如果没有勾选Allow Switch off：则该物体下带有Toggle的子物体，可以一次选中多个（也就是多选状态）
 （3）那么具体要怎么做呢？
 这时我们要结合上面Toggle的预留问题：Group
 当我们的父物体上有Toggle Group组件且该物体的子物体上有Toggle组件时；
 我们就可以建立一个按钮组，用来控制所有Toggle组件的选择；
 具体操作：
 选中所有含有Toggle组件的子物体，在子物体的Toggle菜单栏上找到Group栏，把父物体拖拽添加到个Group：如图所示：
 这样便实现了按钮组的操作。
 
我简单写了一个Toggle Group类的控制方法：大家可以参考一下。
 
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UI;

public class ToggleGroupControl : MonoBehaviour
{
    /// <summary>
    /// 建立Toggle列表，存取所有的Toggle，便于调用操作
    /// </summary>
    [SerializeField] List<Toggle> ToggleList = new List<Toggle>();
    // Start is called before the first frame update
    void Start()
    {
        //给list赋值
        ToggleList = transform.GetComponentsInChildren<Toggle>().ToList();
        //遍历Toggle Group下的所有Toggle
        for (int i = 0; i < ToggleList.Count; i++)
        {
            var toggle = ToggleList[i];
            var a = i;
            //绑定Toggle事件
            toggle.onValueChanged.AddListener(delegate (bool ison)
            {
                this.OnValueChanged(ison, a);

            });
        }
    }

    // Update is called once per frame
    void Update()
    {
        
    }
    public void OnValueChanged(bool ison, int value)
    {
        if (ison)
        {
            print("执行你的选中方法");

        }

    }
}

 

没有艰辛，便无所获。
 
官方文档：Toggle 组件参考 · Cocos Creator
 
Toggle 是一个 CheckBox复选框，当它和 ToggleGroup 一起使用的时候，可以变成 RadioButton单选框。
 
层级管理器：
 
父节点需要有ToggleContainer组件
 
子节点单选页签要有Toggle组件
 
代码选中指定页签：
 
node.getComponent(cc.Toggle).isChecked = true;
// 这个状态为true后，会展示对应精灵。且把其他Toggle设为false。
 
ToggleContainer组件
 
 
 check_events：点击任意toggle按钮都会触发此点击事件。
 
 
Toggle组件理解，与按钮类似
 
 
 
 
interactable：按钮是否启用。
 
is_checked：是否选中当前按钮。
 
check_mask：当被选中时，显示的精灵。请统一命名为：checkmark。
 
toggle_group：这个属性是可选的。如果这个为 null，则 Toggle 是一个 CheckBox，否则，Toggle 是一个 RadioButton。【其实把toggle节点放在ToggleContainer节点下面就是RadioButton】
 
check_events：点击事件。
 
 
整理不易，关注收藏不迷路。
 
目录：CocosCreator经典笔记_神兽白泽-CSDN博客
 
笔者qq、微信：1302109196
 
qq群：415468592

1、功能描述
 
        通过Toggle实现类似按钮的操作，举例实现三个的点击功能，3个按钮可以实现的是各自之间点击对应实现相应的功能，不能BT1点击之后再次点击BT2,此时我们不能控制BT2进行功能实现时关闭BT1正在实现的功能。这是一个弊端，可能会导致同时运行不同功能，很混乱，用Toggle组件就可以避免这个问题了，同一个Canvas下的toggle可以实现点击其中一个关闭其他Toggle。
 
2、基本使用步骤
 
①一个空物体GameObject名字叫做TController
 
②设置3个Toggle在同一个Canvas中（创建UI下的Toggle组件，这里创建Toggle时会自动创建一个父物体Canvas）
 
③将Canvas设置为TController的子物体
 
④在TController上面添加Toggle Group组件，挂上控制函数
 
⑤每一个Toggle中都设置Group为TController。
 
3、举例
 
三个Toggle组件实现Image变颜色
 
4、实现代码：
 
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class NewBehaviourScript : MonoBehaviour
{
    //声明三个toggle组件
    [SerializeField] private Toggle m_toggle1;
    [SerializeField] private Toggle m_toggle2;
    [SerializeField] private Toggle m_toggle3;
    //控制的图像组件
    [SerializeField] private Image m_image;

   
    void Start()
    {
       //给每个Toggle添加上对应的实现函数
        m_toggle1.onValueChanged.AddListener(DoChangeImageColor1);
        m_toggle2.onValueChanged.AddListener(DoChangeImageColor2);
        m_toggle3.onValueChanged.AddListener(DoChangeImageColor3);

    }

    //具体实现函数的定义
    public void DoChangeImageColor1(bool Value)
    {
        if (Value == true)
        {
           
            m_image.color = Color.black;
            m_image.gameObject.SetActive(true);

        }
    }
    public void DoChangeImageColor2(bool Value)
    {
        if (Value == true)
        {
            m_image.color = Color.white;
            m_image.gameObject.SetActive(true);

        }
    }
    public void DoChangeImageColor3(bool Value)
    {
        if (Value == true)
        {
            m_image.color = Color.red;
            m_image.gameObject.SetActive(true);

        }
    }

}
 
5、操作界面：
 
 
 
此处的is on关闭，不然开始是多选的状态
 
 6、运行界面
 
完美实现
 
 
7、致谢
 
 感谢博主的参考学习链接。

前言
 
Toggle 是一个 CheckBox，他可以与 ToggleGroup/ToggleContainer 一起使用，也就是多项单选按钮。
 
Toggle 组件
 
 
点击 属性检查器 下面的 添加组件 按钮，然后选择 UI组件 中的 Toggle，即可将 Toggle 组件 添加至节点。
 
想要查看 Toggle组件 的API，请点击这里，这里截取部分 Toggle组件 的API用作说明。
 ·
 ·
 ·
 
Toggle 的属性
 
属性（properties）
说明
target Node
需要过渡的目标。（所选目标，一般为本身添加Toggle组件，所以目标为本身Node节点）
interactable Boolean
按钮事件是否被响应，如果为 false，则按钮将被禁用，无法点击。
enableAutoGrayEffect Boolean
如果设置为 true，当 Toggle 的 interactable 属性为 false 的时候，会使用内置 shader 让 Toggle 的 target 节点的 sprite 组件变灰。
transition Button.Transition
按钮状态改变时过渡方式。 NONE:点击时无过渡效果， COLOR:点击时进行颜色变化， SPRITE: 点击时更改精灵图，SCALE:点击时改变按钮的大小。
isChecked Boolean
如果设置为 true，则 check mark 组件会处于 enabled 状态，否则处于 disabled 状态。
checkMark Sprite
Toggle 处于选中状态时显示的图片。
toggleGroup ToggleGroup
Toggle 所属的 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监听）
 
 
将要绑定方法的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);
	    },
	});
	
 
欢迎留言交流技术