【Unity3D】UGUI之Toggle

1 Toggle属性面板

在 Hierarchy 窗口右键，选择 UI 列表里的 Toggle 控件，即可创建 Toggle 控件，选中创建的 Toggle 控件，按键盘【T】键，可以调整 Toggle 控件的大小和位置。

创建 Toggle 控件时，系统会自动为其创建 2 个 Image 子控件和 1 个 Text 控件，如下：

Background：Image 控件，选择框背景；
Checkmark：Image 控件，勾选图标；
Label：Text 控件，选择框右边的文字说明。

Toggle 控件的属性面板如下：

说明：Group 用于指定分组，可以应用于复选框和单选框。

2 Toggle 注册事件

点击 OnValueChanged 下面的 “+” 号，可以为选择框添加响应事件，可以添加多个事件。

1）注册已有组件的方法

点击 OnValueChanged 下面的 “+” 号，将 Toggle 下面的 Label 拖拽到 OnValueChanged 面板里，选择 Text.text，下方文本设置 "xxxx"，如下：

单击 Toggle，选择框右边的文本会显示为 “xxxx”，如下：

2）注册脚本组件里面的方法

给 Toggle 控件添加 ToggleController 脚本组件如下：

ToggleController.cs

using UnityEngine;public class ToggleController : MonoBehaviour {public void OnClick1() {Debug.Log("Click1");}public void OnClick2(string msg) {Debug.Log("Click2, msg=" + msg);}public void OnClick3(bool isOn) {Debug.Log("Click3, isOn=" + isOn);}
}

注意：待注册的方法，最多只能提供 1 个参数, 当参数为 bool 类型时，入参表示选择框的选中状态。

点击 OnValueChanged 下面的 “+” 号，将 ToggleController 脚本组件拖拽到 OnValueChanged 面板里，选择 ToggleController.OnClick1 方法；再点击 OnValueChanged 下面的 “+” 号，将 ToggleController 脚本组件拖拽到 OnValueChanged 面板里，选择 ToggleController.OnClick2 方法，其下方输入"xxxx"；点击 OnValueChanged 下面的 “+” 号，将ToggleController 脚本组件拖拽到 OnValueChanged 面板里，选择 ToggleController.OnClick3 方法。如下：

单击 2 次选择框，打印日志如下：

3）代码里注册事件

给 Toggle 控件添加 ToggleController 脚本组件如下：

ToggleController.cs

using UnityEngine;
using UnityEngine.UI;public class ToggleController : MonoBehaviour {private void Start() {Toggle toggle = GetComponent<Toggle>();toggle.onValueChanged.AddListener(OnValueChanged);}public void OnValueChanged(bool isOn) {Debug.Log("OnValueChanged, isOn=" + isOn);}
}

注意：AddListener 方法里只能添加入参为 bool 类型的方法，可以添加多个方法。

单击 2 次选择框，打印日志如下：

3 Toggle Group（选择框组）

Toggle Group（选择框组）一般用于单选或多选。

在 Canvas 下创建一个 Empty 对象，改名为 ToggleGroup，在其下创建 4 个 Toggle 控件，并改名为 Toggle1~Toggle4，如下：

4 个 Toggle 设置 label 分别为 one、two、three、four，IsOn 属性都不勾选，如下：

给 ToggleGroup 对象添加 ToggleGroup 组件，如下：

说明：AllowSwitchOff 属性用于设置单选框是否允许一个都不选。

选中 Toggle1~Toggle4，将 ToggleGroup 对象拖拽到 Toggle1~Toggle4 的 Group 面板属性中，如下：

此时再单击选择框，选择框最多只有一个被选中（单选框），如下：