franciscochonge 发表于 2023-2-23 11:03

【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 面板属性中,如下:

此时再单击选择框,选择框最多只有一个被选中(单选框),如下:

声明:本文转自【Unity3D】UGUI之Toggle
页: [1]
查看完整版本: 【Unity3D】UGUI之Toggle