第四十三章 Unity 开关 (Toggle) UI

本文介绍了Unity3D中创建和配置Toggle开关及ToggleGroup的步骤,包括调整位置、改变文本、切换效果、事件绑定以及实现多选一的功能。通过示例展示了如何通过ToggleGroup组件确保同一时间只有一个开关被选中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本章节我们介绍开关 (Toggle)和开关组 (Toggle Group)。首先,我们点击菜单栏“GameObject”->“UI”->“Toggle”,然后调整它的位置,效果如下所示

相信大家在很多网页中也看到过类似的UI元素,它通常用于让用户勾选某些选项。

我们发现开关 (Toggle)下面有两个子游戏对象,一个是Background,另一个是Label。根据名称我们大概能够知道,Background就是那个勾选的框,而Label则是后面的文本文字。如何改变Toggle显示的文本呢?我们点击子游戏对象Label,查看对应的Inspector检视面板。

在上面的的Text输入框内输入文本内容,如下所示的最终效果

接下来,我们来查看Toggle的Inspector检视面板,如下所示

上面一些公共的属性,在其他UI元素中我们经常看到,我们就不逐一介绍了。

接下来,我们继续介绍Toggle的检视面板中的其他属性。

Is On开关在开始时是否为打开状态,也就是勾选状态,还是没有勾选的状态。默认勾选。

Toggle Transition开关切换的效果。Fade表示淡入或淡出,None表示直接出现或消失。

Graphic   用于复选标记的图像,也就是替换掉那个默认的勾选框。

Group此开关所属的开关组,就是将多个Toggle设置为同一个组内。

接下来就是 On Value Changed(Boolean)的事件,也就是开关切换事件。

    // 开关元素上面的 Toggle 组件
    private Toggle toggle;

    void Start()
    {
        // 获取开关元素上面的 Toggle 组件
        toggle = GameObject.Find("Toggle").GetComponent<Toggle>();
    }

    public void testToggleChange()
    {
        Debug.Log("ToggleChange:" + toggle.isOn);
    }

接下来,我们将这个方法绑定到开关 (Toggle) 的On Value Changed(Boolean)的事件上

最后,我们运行整个工程,效果如下

默认是勾选状态(isOn=True),然后我们点击取消(isOn=False),然后继续点击勾选(isOn=True),那么控制器就应该先输出False,后输出True

接下来,我们介绍开关组 (Toggle Group),很明显,它就是一组开关 (Toggle) UI元素组成。开关组不是可见的 UI 元素,而是一种修改一组开关(Toggle)的行为的方法。属于同一组的开关(Toggle)将受到约束,即一次只能打开其中一个开关。通过按下打开其中一个开关(Toggle)便会自动关闭其他开关(Toggle)。说白了,就是要实现多选一的效果。它与下拉框 (Dropdown)实现的效果是一样的。只不过两者在视觉体现上不一样而已。它如何使用呢?首先,我们添加一个新的Toggle UI元素,修改它的文本内容,最终效果如下所示

此时两个Toggle没有任何关系,点击任何一个,都不会影响对方。如何获得二选一的效果呢?就是让他们两个归到一个组中。接下来,我们给第一个Toggle UI元素添加一个 “Toggle Group”组件。请大家注意,“Toggle Group”是一个组件,而不是一个UI元素。

也就是说,当前的Toggle不仅仅是一个UI元素,它还是一个“Toggle Group”。这个组的名称就是UI元素Toggle的名称“Toggle”。当然,在实际开发中,我们更多的是将“Toggle Group”设置到其他的UI元素上面去(例如一个Panel元素)。接下来,我们就需要给两个Toggle设置到这个组上面去。

将Hierarchy层次面板中的自己拖拽到自己的“Group”属性值中。

将Hierarchy层次面板中的Toggle拖拽到Toggle2的“Group”属性值中。

 

我们运行之后,选中其中一个后,另一个就是取消掉了,达到了二选一效果了。

本课程涉及的内容已经共享到百度网盘:https://pan.baidu.com/s/1e1jClK3MnN66GlxBmqoJWA?pwd=b2id

### 如何在Unity中使用UI Toggle组件 #### 创建Toggle对象 为了创建一个 `Toggle` 组件,在Hierarchy视图中右键点击并选择`UI -> Toggle`。这会自动创建所需的游戏对象以及关联的子对象,包括背景图像、标签和滑动开关指示符。 #### 设置Toggle属性 通过Inspector面板调整新创建的`Toggle`游戏对象上的各个参数来定制其外观与行为。可修改的内容有: - **Text**: 显示的文字内容。 - **Background**: 背景图片资源。 - **Graphic**: 可以为切换按钮指定图形元素。 - **Transition**: 定义交互效果的方式,比如颜色渐变或动画播放等[^1]。 #### 编写脚本来响应事件 为了让程序能够监听到用户的操作动作,可以在项目里编写C#脚本并与特定的回调函数相连接。下面是一个简单的例子展示怎样捕捉当toggle状态改变时触发的动作: ```csharp using UnityEngine; using UnityEngine.UI; public class ToggleExample : MonoBehaviour { private Toggle toggleComponent; void Start() { // 获取当前物体上挂载的Toggle组件实例 toggleComponent = GetComponent<Toggle>(); // 注册OnValueChanged事件处理器 toggleComponent.onValueChanged.AddListener(OnToggleChanged); } /// <summary> /// 当前Toggle的状态发生变化时调用此方法. /// </summary> /// <param name="isToggled">新的激活/关闭状态</param> void OnToggleChanged(bool isToggled) { Debug.Log($"The toggle has been switched to {(isToggled ? "ON" : "OFF")}"); } } ``` 该段代码实现了每当用户改变了某个带有此类脚本绑定的`Toggle`控件的选择情况之后就会打印一条消息至控制台说明被开启还是关闭了[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咆哮的程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值