4.Toggle

4.1 Toggle

Toggle（开关）是在开和关两个状态下切换，开是勾选了 Is On 选项，关是不勾选 Is On 选项。

Toggle 的构成如下图所示：

其中：Background 和 Checkmark 是两个图像表示开关，Label 是文本。

与 Button 相比多了如下图中的变量：

• Is On - 开关状态
• Toggle Transition - 显示切换时的过渡效果
• Graphic - 配合 Is On，指定图像的显示与不显示
• Group - Toggle Group 必须使用的变量，实现多选一的功能

监听区：

On Value Changed - 值发生变化时的监听，值为 Bool 型。

示例：默认的 Toggle 显示一个勾选框和一段文本，通过修改开和关图像实现如下效果：

(1).准备如上图中的两个图像文件，off.jpg 和 on.jpg。

(2).将图像拖拽到 Project 窗口，并设置其 Texture Type（纹理类型）为 Sprite（2D and UI）。

(3).在 Hierarchy 窗口中右击选择 UI -> Toggle，单击 Toggle 下的 Background，设置其图像为 off，设置 Checkmark 的图像为 on。

示例：使用 Toggle 控制场景中的图像是否显示。（在上面的基础上继续操作）

(1).准备一张图像文件，将图像拖拽到 Project 窗口，并设置其 Texture Type（纹理类型）为 Sprite（2D and UI）。

(2).在 Hierarchy 窗口中右击选择 UI -> Image，并设置其 Source Image 为 (1) 中的图像。

1.通过设置 Toggle 组件的监听区实现

选中 Toggle 组件，在监听区单击 “+” 按钮，将上面的 Image 组件拖拽到监听区，并在 “No Function” 中选择 “GameObject” -> “SetActive”。

2.通过脚本来实现

代码如下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ToggleValueChanged : MonoBehaviour
{
    private Toggle toggle;
    private GameObject image;
    // Start is called before the first frame update
    void Start()
    {
        toggle = GetComponent<Toggle>();
        image = GameObject.Find("Image");

        toggle.onValueChanged.AddListener(OnToggleValueChanged);
    }

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

    void OnToggleValueChanged(bool value) 
    {
        image.SetActive(value);
        print("The toggle now is " + value.ToString());
    }
}

将脚本拖拽到 Toogle 组件的 Inspector 窗口中。

4.2 Toggle Group

Toggle Group 实现多选一的功能。制作步骤如下：

1.在 Hierarchy 窗口中右击 Canvas ，选择 Create Empty 创建空物体。

2.在 Hierarchy 窗口中选中刚才创建的空物体，在 Inspector 窗口中点击 Add Component -> Toggle Group，添加 Toggle Group 组件。

3.在 Hierarchy 窗口中右击空物体，选择 UI -> Toggle，可以多创建几个，逐个选中创建好的 Toggle，将空物体拖拽到每个子级 Toggle 的 Group 变量中。如下图所示：

4.设置每个子级 Toggle 组件的变量 Is On 为不勾选状态，只保留一个为勾选状态。Toogle Group 组件中的 Allow Switch Off 勾选后允许所有的 Toggle 都处于关的状态。