UG3L4——Toggle 单选框

Toggle

​Toggle​ 是开关组件，是UGUI中用于处理玩家单选框多选框相关交互的关键组件

开关组件 默认是多选框，可以通过配合 ToggleGroup​ 组件制作为单选框

默认创建的Toggle由4个对象组成

  • 父对象 —— Toggle组件依附
  • 子对象 —— 背景图（必备）、选中图（必备）、说明文字（可选）

本章代码关键字

1
2
3
4
5
Toggle                                 //单选框类
ToggleGroup                            //单选框组合类
toggle.isOn                            //是否处于激活状态
toggleGroup.ActiveToggles()            //该方法是迭代器，通过foreach循环可以得到该toggleGroup下哪个toggle是激活的
toggle.onValueChanged.AddListener()    //向toggle添加当toggle选中情况变化时执行的函数

Toggle 参数相关

​image​

  • Interactable：是否接受输入

  • Transition：响应用户输入的过渡效果

  • Navigation：导航模式
    可以设置UI元素如何在播放模式中控制器导航

    • 以上三个参数和Button上的参数一样

  • Is On：当前是否处于打开状态

  • Toggle Transition：在开关值变化时的过渡方式

    ​image​

    • None：无任何过渡，直接显示隐藏
    • Fade：淡入淡出

  • Graphic：用于表示选中状态的图片

  • Group：单选框分组

    需要额外找对象挂载一个Toggle Group，然后同组的Togle都选择它

    ​image​

    • Allow Switch Off：是否允许不选中任何一个单选框
      注意：单选框分组组件可以挂载在任何对象上，只需要将其和一组的单选框关联即可

  • OnValueChanged：开关状态变化时执行的函数列表

代码控制 Toggle

面板上的参数都可以用代码控制

1
2
3
Toggle toggle = GetComponent<Toggle>();
toggle.isOn = true;
print(toggle.isOn);

Toggle Group也可以通过代码控制

1
2
ToggleGroup toggleGroup = GetComponent<ToggleGroup>();
toggleGroup.allowSwitchOff = false;

得到当前处于激活状态的Toggle

可以遍历提供的迭代器 得到当前处于选中的状态的Toggle

1
2
3
4
foreach (Toggle item in toggleGroup.ActiveToggles())
{
    print(item.name + " " + item.isOn);
}

监听事件的两种方式

需要参数为bool类型的函数，表示当前toggle是否被选中

  1. 拖脚本

    首先在脚本内写好公共函数（非公共函数无法调用），必须要有一个Bool类型的参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    using UnityEngine;
    using UnityEngine.UI;

    public class Lesson11 : MonoBehaviour
    {
        public void ChangeValue(bool isOn)
        {
            print("状态改变");
        }
    }

    然后在OnValueChanged()列表内添加函数（按[+]），拖入Toggle对象，选择挂载在Toggle对象上的脚本中的函数
    切记，一定要选择动态bool值（Dynamic bool）的函数，而不是静态参数(Static Parameters)的函数！否则可能无法获取当前toggle的选中状态

    ​image​

  2. 代码控制

    向Toggle的onValueChanged内使用方法来添加函数，移除函数，函数不限公共还是私有

    • 向onValueChanged添加函数

      1
      2
      3
      4
      5
      toggle.onValueChanged.AddListener(ChangeValue2);
      toggle.onValueChanged.AddListener((b) =>    //参数前面可以不加bool，会自动判断
      {
          print("代码监听状态改变2" + b);
      });

    • 移除函数和Button的内容类似

‍