Unity UI实战：零基础打造Material Design Switch开关

2025-05-05 19:09:45

Unity UI 开发：从零打造 Material Design 风格的 Switch 开关

在开发跨平台移动应用时，UI 的一致性和用户体验至关重要。一个常见的需求是在界面上放置一个开关（Switch）控件，允许用户开启或关闭某些功能，类似 Android Material Design 中的那种样式。

用 Unity 做开发，你可能会发现它不像原生 Android 或 iOS 那样直接提供一个现成的、符合 Material Design 风格的 Switch 控件。官方的 UI 系统更侧重于提供基础构建块。商店里有些第三方资源，比如提问者提到的那个，设计上可能不尽如人意，或者存在其他限制。

那，面对这种情况，是必须自己从头造轮子吗？或者网上有没有什么好用的方案能直接拿来用？咱们来聊聊这个问题。

问题分析：为啥 Unity 没有内置好看的 Switch？

Unity 本身是一个强大的游戏引擎和跨平台开发工具，它的 UI 系统 (UGUI) 提供了一套灵活的组件，像 Image, Button, Toggle, Slider 等。这些组件是构成复杂 UI 的基础。

Unity 的设计哲学倾向于提供“积木”，而不是“搭好的城堡”。这样做的好处是灵活性高，开发者可以根据自己的需求组合出各种各样的 UI 元素。缺点就是，对于一些平台特有的、设计规范明确的控件（比如 Material Design Switch），就需要开发者自己多花点心思。

几个主要原因：

跨平台通用性： Unity 旨在多平台运行。不同平台有不同的 UI 风格指南（Material Design for Android, Human Interface Guidelines for iOS）。内置特定平台的控件会增加引擎的复杂性，也可能不符合某些开发者的需求。
设计灵活性： 游戏和应用 UI 设计千差万别。提供基础组件能让开发者不受限于特定风格，自由创作。
社区与生态： Unity 有一个庞大的资源商店 (Asset Store)，开发者可以在上面找到或分享各种工具和资源，包括 UI 控件。引擎本身则专注于核心功能。

所以，想要一个漂亮的 Material Design Switch，自己动手实现或者寻找高质量的第三方库是常见的解决路径。

解决方案：打造你的专属 Switch

既然如此，我们就来看看怎么解决这个问题。主要思路有两条：自己动手丰衣足食，或者再仔细找找看有没有合适的“轮子”。

方案一：手动实现基于 Unity UI 的 Switch

这是最灵活，也是最有掌控力的方式。我们可以利用 Unity UI 的现有组件，通过组合和脚本来实现一个 Material Design 风格的 Switch。

1. 原理和作用

核心思路是使用一个 Toggle 组件作为底层逻辑控制，因为它天生就具有“开/关”状态。然后，我们用 Image 组件来绘制 Switch 的背景和滑块（Thumb），再配合 Animator 来实现平滑的切换动画。

Toggle 组件： 管理开关的状态 (on/off)，并提供状态变化的事件回调。
Image 组件：
- 一个 Image 作为背景，根据开关状态改变颜色。
- 另一个 Image 作为滑块，根据开关状态改变位置和颜色。
Animator 组件： 控制滑块的滑动动画和背景的颜色渐变动画，让切换过程更自然。
C# 脚本： 响应 Toggle 的状态变化，触发 Animator 中的动画，并可以暴露事件给其他系统。

2. 实现步骤

让我们一步步来搭建这个 Switch。

(1) 创建基础 UI 元素

在你的 Canvas 下创建一个空的 GameObject，命名为 MaterialSwitch。
在 MaterialSwitch 上添加 Toggle 组件。在 Toggle 组件的属性面板中：
- 取消勾选 Is On（默认关闭状态）。
- 将 Transition 设置为 None (我们用 Animator 控制视觉)。
- 将 Graphic 设置为 None 或者你可以拖拽一个透明的 Image (目的是让 Toggle 可交互区域覆盖整个 Switch，但本身不显示自己的 Graphic)。
在 MaterialSwitch 下创建一个 Image 作为背景，命名为 Background。
- 调整其 RectTransform 使其呈现一个圆角矩形的轨道形状。你可以使用一张圆角矩形的 Sprite，或者用代码动态生成。
- 设置初始颜色（例如，关闭状态的灰色）。
在 MaterialSwitch 下再创建一个 Image 作为滑块，命名为 Handle。
- 调整其 RectTransform 使其呈现一个圆形。
- 将其放置在背景轨道的左侧（关闭状态的位置）。
- 设置初始颜色（例如，关闭状态的浅灰色或白色）。

Hierarchy 看起来可能像这样：

Canvas
  └─ MaterialSwitch (Toggle)
     ├─ Background (Image)
     └─ Handle (Image)

(2) 准备视觉资源和 Animator

你需要准备或制作以下视觉资源：

背景 Sprite (可选)： 一个圆角矩形图片。如果你的背景轨道比较简单，也可以直接用 Unity 的 Image 组件的 Sprite 属性设为 None，然后通过调整 RectTransform 的宽高和使用支持圆角的着色器/UI Material 来实现。更简单的是用一个普通的白色圆角矩形 Sprite，然后通过 Image.color 来改变颜色。
滑块 Sprite (可选)： 一个圆形图片。同上，也可以用白色圆形 Sprite，通过 Image.color 改变颜色。

接下来配置 Animator：

选中 MaterialSwitch GameObject。
打开 Animation 窗口 (Window > Animation > Animation) 和 Animator 窗口 (Window > Animation > Animator)。
在 Animation 窗口中，点击 "Create" 为 MaterialSwitch 创建一个新的 Animator Controller 和一个默认动画片段 (例如，命名为 Switch_Off_Anim)。
在 Animator 窗口中，你会看到 Switch_Off_Anim 状态。再创建一个新的动画片段，命名为 Switch_On_Anim。
添加一个 Bool 类型的参数，例如 IsOn。
创建从 Switch_Off_Anim 到 Switch_On_Anim 的 Transition，条件是 IsOn 为 true。
创建从 Switch_On_Anim 到 Switch_Off_Anim 的 Transition，条件是 IsOn 为 false。
取消两个 Transition 的 Has Exit Time 勾选，并设置 Transition Duration (例如 0.2 秒)来实现平滑过渡。

(3) 制作动画片段

现在来编辑 Switch_Off_Anim 和 Switch_On_Anim 动画片段。

Switch_Off_Anim (关闭状态):
1. 选中 MaterialSwitch，在 Animation 窗口确保选中 Switch_Off_Anim。
2. 点击 "Add Property"。
3. 为 Background 的 Image.Color 添加关键帧，设置为关闭时的颜色 (例如，#BDBDBD，一种灰色)。
4. 为 Handle 的 RectTransform.Anchored Position X 添加关键帧，将其设置在轨道左侧。
5. 为 Handle 的 Image.Color 添加关键帧，设置为关闭时的颜色 (例如，#FAFAFA，一种非常浅的灰色或白色)。
Switch_On_Anim (开启状态):
1. 切换到 Switch_On_Anim 动画片段。
2. 为 Background 的 Image.Color 添加关键帧，设置为开启时的颜色 (例如，#AED581，Material Design 绿色系)。
3. 为 Handle 的 RectTransform.Anchored Position X 添加关键帧，将其设置在轨道右侧。
4. 为 Handle 的 Image.Color 添加关键帧，设置为开启时的颜色 (例如，#4CAF50，Material Design 绿色系的主色)。

提示: Handle 的 X 轴位置可以通过计算得到，例如 Background 宽度的 -1/4 (左边) 和 +1/4 (右边)，或者更精确地基于 Handle 自身的宽度和 Background 的宽度。

(4) 编写控制脚本

创建一个 C# 脚本，例如 MaterialSwitchController.cs，并将其挂载到 MaterialSwitch GameObject 上。

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Events; // 需要引入事件命名空间

[RequireComponent(typeof(Toggle))]
[RequireComponent(typeof(Animator))]
public class MaterialSwitchController : MonoBehaviour
{
    private Toggle toggle;
    private Animator animator;

    // 暴露一个 UnityEvent，方便在 Inspector 中或其他脚本中监听状态变化
    [System.Serializable]
    public class SwitchToggledEvent : UnityEvent<bool> { }
    public SwitchToggledEvent OnSwitchToggled = new SwitchToggledEvent();

    public bool IsOn
    {
        get { return toggle.isOn; }
        set
        {
            if (toggle.isOn != value)
            {
                toggle.isOn = value;
                // Toggle 的 onValueChanged 会自动触发 UpdateVisuals
            }
        }
    }

    void Awake()
    {
        toggle = GetComponent<Toggle>();
        animator = GetComponent<Animator>();

        // 初始化时确保视觉与 Toggle 状态一致
        UpdateVisuals(toggle.isOn);
    }

    void OnEnable()
    {
        toggle.onValueChanged.AddListener(UpdateVisualsAndNotify);
    }

    void OnDisable()
    {
        toggle.onValueChanged.RemoveListener(UpdateVisualsAndNotify);
    }

    private void UpdateVisuals(bool isOn)
    {
        if (animator != null && animator.runtimeAnimatorController != null)
        {
            animator.SetBool("IsOn", isOn);
        }
        // Debug.Log(using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Events; // 需要引入事件命名空间

[RequireComponent(typeof(Toggle))]
[RequireComponent(typeof(Animator))]
public class MaterialSwitchController : MonoBehaviour
{
    private Toggle toggle;
    private Animator animator;

    // 暴露一个 UnityEvent，方便在 Inspector 中或其他脚本中监听状态变化
    [System.Serializable]
    public class SwitchToggledEvent : UnityEvent<bool> { }
    public SwitchToggledEvent OnSwitchToggled = new SwitchToggledEvent();

    public bool IsOn
    {
        get { return toggle.isOn; }
        set
        {
            if (toggle.isOn != value)
            {
                toggle.isOn = value;
                // Toggle 的 onValueChanged 会自动触发 UpdateVisuals
            }
        }
    }

    void Awake()
    {
        toggle = GetComponent<Toggle>();
        animator = GetComponent<Animator>();

        // 初始化时确保视觉与 Toggle 状态一致
        UpdateVisuals(toggle.isOn);
    }

    void OnEnable()
    {
        toggle.onValueChanged.AddListener(UpdateVisualsAndNotify);
    }

    void OnDisable()
    {
        toggle.onValueChanged.RemoveListener(UpdateVisualsAndNotify);
    }

    private void UpdateVisuals(bool isOn)
    {
        if (animator != null && animator.runtimeAnimatorController != null)
        {
            animator.SetBool("IsOn", isOn);
        }
        // Debug.Log($"Switch visual updated: {isOn}");
    }
    
    private void UpdateVisualsAndNotify(bool isOn)
    {
        UpdateVisuals(isOn);
        OnSwitchToggled.Invoke(isOn); // 触发自定义事件
        // Debug.Log($"Switch toggled by user: {isOn}");
    }

    // (可选) 在 Inspector 中预览效果
    #if UNITY_EDITOR
    void OnValidate()
    {
        if (toggle == null) toggle = GetComponent<Toggle>();
        if (animator == null) animator = GetComponent<Animator>();
        
        // 编辑器模式下，如果 animator 和 toggle 存在，根据 toggle 的 IsOn 状态直接设置动画状态，便于预览
        // 注意：这仅用于编辑器即时预览，运行时逻辑由 Awake 和 onValueChanged 控制
        // 且直接 SetBool 可能不会触发完整的 Transition 动画，而是直接跳到状态
        if (Application.isPlaying) return; // 仅在非播放模式下执行

        if (toggle != null && animator != null && animator.runtimeAnimatorController != null && animator.isActiveAndEnabled)
        {
             // 确保Animator参数存在
            bool hasIsOnParam = false;
            if (animator.parameterCount > 0) {
                foreach (AnimatorControllerParameter param in animator.parameters) {
                    if (param.name == "IsOn") {
                        hasIsOnParam = true;
                        break;
                    }
                }
            }

            if (hasIsOnParam) {
                 // 使用 EditorApplication.delayCall 确保在 Inspector 更新后执行
                 UnityEditor.EditorApplication.delayCall += () =>
                 {
                     if (this != null && toggle != null && animator != null) // 检查对象是否仍然有效
                     {
                        // Debug.Log($"OnValidate: Setting Animator 'IsOn' to {toggle.isOn}");
                        animator.SetBool("IsOn", toggle.isOn); // 设置参数
                        animator.Update(0f); // 强制 Animator 更新到当前帧
                     }
                 };
            }
        }
    }
    #endif
}
quot;Switch visual updated: {isOn}");
    }
    
    private void UpdateVisualsAndNotify(bool isOn)
    {
        UpdateVisuals(isOn);
        OnSwitchToggled.Invoke(isOn); // 触发自定义事件
        // Debug.Log(using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Events; // 需要引入事件命名空间

[RequireComponent(typeof(Toggle))]
[RequireComponent(typeof(Animator))]
public class MaterialSwitchController : MonoBehaviour
{
    private Toggle toggle;
    private Animator animator;

    // 暴露一个 UnityEvent，方便在 Inspector 中或其他脚本中监听状态变化
    [System.Serializable]
    public class SwitchToggledEvent : UnityEvent<bool> { }
    public SwitchToggledEvent OnSwitchToggled = new SwitchToggledEvent();

    public bool IsOn
    {
        get { return toggle.isOn; }
        set
        {
            if (toggle.isOn != value)
            {
                toggle.isOn = value;
                // Toggle 的 onValueChanged 会自动触发 UpdateVisuals
            }
        }
    }

    void Awake()
    {
        toggle = GetComponent<Toggle>();
        animator = GetComponent<Animator>();

        // 初始化时确保视觉与 Toggle 状态一致
        UpdateVisuals(toggle.isOn);
    }

    void OnEnable()
    {
        toggle.onValueChanged.AddListener(UpdateVisualsAndNotify);
    }

    void OnDisable()
    {
        toggle.onValueChanged.RemoveListener(UpdateVisualsAndNotify);
    }

    private void UpdateVisuals(bool isOn)
    {
        if (animator != null && animator.runtimeAnimatorController != null)
        {
            animator.SetBool("IsOn", isOn);
        }
        // Debug.Log($"Switch visual updated: {isOn}");
    }
    
    private void UpdateVisualsAndNotify(bool isOn)
    {
        UpdateVisuals(isOn);
        OnSwitchToggled.Invoke(isOn); // 触发自定义事件
        // Debug.Log($"Switch toggled by user: {isOn}");
    }

    // (可选) 在 Inspector 中预览效果
    #if UNITY_EDITOR
    void OnValidate()
    {
        if (toggle == null) toggle = GetComponent<Toggle>();
        if (animator == null) animator = GetComponent<Animator>();
        
        // 编辑器模式下，如果 animator 和 toggle 存在，根据 toggle 的 IsOn 状态直接设置动画状态，便于预览
        // 注意：这仅用于编辑器即时预览，运行时逻辑由 Awake 和 onValueChanged 控制
        // 且直接 SetBool 可能不会触发完整的 Transition 动画，而是直接跳到状态
        if (Application.isPlaying) return; // 仅在非播放模式下执行

        if (toggle != null && animator != null && animator.runtimeAnimatorController != null && animator.isActiveAndEnabled)
        {
             // 确保Animator参数存在
            bool hasIsOnParam = false;
            if (animator.parameterCount > 0) {
                foreach (AnimatorControllerParameter param in animator.parameters) {
                    if (param.name == "IsOn") {
                        hasIsOnParam = true;
                        break;
                    }
                }
            }

            if (hasIsOnParam) {
                 // 使用 EditorApplication.delayCall 确保在 Inspector 更新后执行
                 UnityEditor.EditorApplication.delayCall += () =>
                 {
                     if (this != null && toggle != null && animator != null) // 检查对象是否仍然有效
                     {
                        // Debug.Log($"OnValidate: Setting Animator 'IsOn' to {toggle.isOn}");
                        animator.SetBool("IsOn", toggle.isOn); // 设置参数
                        animator.Update(0f); // 强制 Animator 更新到当前帧
                     }
                 };
            }
        }
    }
    #endif
}
quot;Switch toggled by user: {isOn}");
    }

    // (可选) 在 Inspector 中预览效果
    #if UNITY_EDITOR
    void OnValidate()
    {
        if (toggle == null) toggle = GetComponent<Toggle>();
        if (animator == null) animator = GetComponent<Animator>();
        
        // 编辑器模式下，如果 animator 和 toggle 存在，根据 toggle 的 IsOn 状态直接设置动画状态，便于预览
        // 注意：这仅用于编辑器即时预览，运行时逻辑由 Awake 和 onValueChanged 控制
        // 且直接 SetBool 可能不会触发完整的 Transition 动画，而是直接跳到状态
        if (Application.isPlaying) return; // 仅在非播放模式下执行

        if (toggle != null && animator != null && animator.runtimeAnimatorController != null && animator.isActiveAndEnabled)
        {
             // 确保Animator参数存在
            bool hasIsOnParam = false;
            if (animator.parameterCount > 0) {
                foreach (AnimatorControllerParameter param in animator.parameters) {
                    if (param.name == "IsOn") {
                        hasIsOnParam = true;
                        break;
                    }
                }
            }

            if (hasIsOnParam) {
                 // 使用 EditorApplication.delayCall 确保在 Inspector 更新后执行
                 UnityEditor.EditorApplication.delayCall += () =>
                 {
                     if (this != null && toggle != null && animator != null) // 检查对象是否仍然有效
                     {
                        // Debug.Log(using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Events; // 需要引入事件命名空间

[RequireComponent(typeof(Toggle))]
[RequireComponent(typeof(Animator))]
public class MaterialSwitchController : MonoBehaviour
{
    private Toggle toggle;
    private Animator animator;

    // 暴露一个 UnityEvent，方便在 Inspector 中或其他脚本中监听状态变化
    [System.Serializable]
    public class SwitchToggledEvent : UnityEvent<bool> { }
    public SwitchToggledEvent OnSwitchToggled = new SwitchToggledEvent();

    public bool IsOn
    {
        get { return toggle.isOn; }
        set
        {
            if (toggle.isOn != value)
            {
                toggle.isOn = value;
                // Toggle 的 onValueChanged 会自动触发 UpdateVisuals
            }
        }
    }

    void Awake()
    {
        toggle = GetComponent<Toggle>();
        animator = GetComponent<Animator>();

        // 初始化时确保视觉与 Toggle 状态一致
        UpdateVisuals(toggle.isOn);
    }

    void OnEnable()
    {
        toggle.onValueChanged.AddListener(UpdateVisualsAndNotify);
    }

    void OnDisable()
    {
        toggle.onValueChanged.RemoveListener(UpdateVisualsAndNotify);
    }

    private void UpdateVisuals(bool isOn)
    {
        if (animator != null && animator.runtimeAnimatorController != null)
        {
            animator.SetBool("IsOn", isOn);
        }
        // Debug.Log($"Switch visual updated: {isOn}");
    }
    
    private void UpdateVisualsAndNotify(bool isOn)
    {
        UpdateVisuals(isOn);
        OnSwitchToggled.Invoke(isOn); // 触发自定义事件
        // Debug.Log($"Switch toggled by user: {isOn}");
    }

    // (可选) 在 Inspector 中预览效果
    #if UNITY_EDITOR
    void OnValidate()
    {
        if (toggle == null) toggle = GetComponent<Toggle>();
        if (animator == null) animator = GetComponent<Animator>();
        
        // 编辑器模式下，如果 animator 和 toggle 存在，根据 toggle 的 IsOn 状态直接设置动画状态，便于预览
        // 注意：这仅用于编辑器即时预览，运行时逻辑由 Awake 和 onValueChanged 控制
        // 且直接 SetBool 可能不会触发完整的 Transition 动画，而是直接跳到状态
        if (Application.isPlaying) return; // 仅在非播放模式下执行

        if (toggle != null && animator != null && animator.runtimeAnimatorController != null && animator.isActiveAndEnabled)
        {
             // 确保Animator参数存在
            bool hasIsOnParam = false;
            if (animator.parameterCount > 0) {
                foreach (AnimatorControllerParameter param in animator.parameters) {
                    if (param.name == "IsOn") {
                        hasIsOnParam = true;
                        break;
                    }
                }
            }

            if (hasIsOnParam) {
                 // 使用 EditorApplication.delayCall 确保在 Inspector 更新后执行
                 UnityEditor.EditorApplication.delayCall += () =>
                 {
                     if (this != null && toggle != null && animator != null) // 检查对象是否仍然有效
                     {
                        // Debug.Log($"OnValidate: Setting Animator 'IsOn' to {toggle.isOn}");
                        animator.SetBool("IsOn", toggle.isOn); // 设置参数
                        animator.Update(0f); // 强制 Animator 更新到当前帧
                     }
                 };
            }
        }
    }
    #endif
}
quot;OnValidate: Setting Animator 'IsOn' to {toggle.isOn}");
                        animator.SetBool("IsOn", toggle.isOn); // 设置参数
                        animator.Update(0f); // 强制 Animator 更新到当前帧
                     }
                 };
            }
        }
    }
    #endif
}

脚本解释：

RequireComponent: 确保 MaterialSwitch GameObject 上始终有 Toggle 和 Animator 组件。
Awake(): 获取 Toggle 和 Animator 组件的引用，并根据 Toggle 的初始状态更新视觉。
OnEnable() / OnDisable(): 监听和移除 Toggle 的 onValueChanged 事件。当用户点击 Switch 时，Toggle 的状态会改变，这个事件会被触发。
UpdateVisuals(bool isOn): 这个方法根据传入的 isOn状态，设置 Animator 的 IsOn 参数，从而触发前面定义的动画过渡。
UpdateVisualsAndNotify(bool isOn): 内部调用 UpdateVisuals，并且额外调用 OnSwitchToggled.Invoke(isOn)。这个 OnSwitchToggled 事件可以让你在 Inspector 里把其他脚本的函数拖拽过来，或者在其他代码里通过 materialSwitchControllerInstance.OnSwitchToggled.AddListener(YourFunction); 来监听开关状态的改变。
IsOn 属性: 允许其他脚本通过代码方便地获取和设置 Switch 的状态。设置时也会正确更新 Toggle 和视觉。
OnValidate() (编辑器扩展): 这个宏包裹的代码只在 Unity 编辑器中运行。它允许你在编辑模式下改变 Toggle 的 Is On 勾选框时，就能实时看到 Switch 的动画状态（或至少是最终状态）。这对于 UI 布局和设计非常方便。注意这里用了 EditorApplication.delayCall 来确保 Animator.Update 在 Inspector 的值更新之后执行，以正确反映变化。

(5) 链接 Toggle 事件

选中 MaterialSwitch GameObject。
在 Toggle 组件的 On Value Changed (Boolean) 事件区域，点击 + 号。
把 MaterialSwitch GameObject 自己拖拽到事件接收者栏位。
从函数下拉列表中选择 MaterialSwitchController > UpdateVisualsAndNotify (bool)（如果是动态bool，应该能直接选到）。

这样，当 Toggle 的 isOn 状态因用户交互而改变时，UpdateVisualsAndNotify 方法就会被调用。

现在，运行你的场景，点击 Switch，它应该能平滑地在开和关之间切换了！

3. 安全建议和使用技巧

对于一个 UI Switch 来说，直接的“安全”问题可能不多，但有几点值得注意：

状态同步： 如果这个 Switch 控制的是一个重要的、需要持久化的状态（比如游戏设置），确保在状态改变时，将新状态保存到 PlayerPrefs、配置文件或服务器。
防止快速连点： 虽然 Animator 的过渡时间可以缓解一些问题，但如果动画还在播放时用户再次点击，Toggle 的状态会立刻改变，而视觉动画可能需要时间追赶。多数情况下这不成问题，但如果触发了复杂的后端逻辑，你可能需要在脚本中加入一个小的延迟或者状态锁，防止在动画过渡期间重复触发逻辑。不过对于纯视觉开关，一般不需要过度设计。

4. 进阶使用技巧

自定义颜色主题： 将颜色值暴露为脚本的 public Color onBackgroundColor; 等变量，这样就可以在 Inspector 中为不同的 Switch 实例设置不同的颜色主题，或者通过代码动态修改。
触觉反馈： 在移动平台上，可以在 UpdateVisualsAndNotify 方法中，当开关状态改变时，调用 Handheld.Vibrate() (如果是针对 iOS，可能需要更原生的插件) 来提供触觉反馈，增强用户体验。
集成到 UI 主题系统： 如果你的项目有统一的 UI 主题管理系统 (例如使用 ScriptableObject 来定义颜色、字体等)，可以将 Switch 的颜色配置也纳入该系统，方便全局调整。
响应区域优化： Toggle 的可交互区域默认是其 Graphic 组件的区域。如果 Graphic 被设为 None 或透明，交互区域可能不理想。可以给 Toggle 一个不可见的、覆盖整个 Switch 区域的 Image 作为其 Graphic，或者确保 Background 或 Handle Image 的 Raycast Target 是开启的，并且其父 GameObject（也就是带有 Toggle 的那个）覆盖了正确的交互范围。通常将 Toggle 挂载在 MaterialSwitch 根对象上，并将 MaterialSwitch 的 RectTransform 调整到期望的点击区域大小就足够了。

方案二：再次探索第三方资源

虽然最初提到的资源不理想，但不代表没有其他选择。

Unity Asset Store： 可以花点时间用更精确的关键词 (如 "Material UI Toggle", "Mobile Switch UI") 再次搜索。注意查看资源的评价、更新日期、支持的 Unity 版本以及是否有演示视频或 Demo。
GitHub： 有些开发者会在 GitHub 上分享他们自己做的 Unity UI 控件或扩展。搜索 "Unity UI Switch GitHub" 或类似关键词。这类资源可能免费，但质量和维护情况参差不齐。
UI 扩展包： 一些大型的 UI 扩展包 (例如较早的 Unity UI Extensions，现在可能有了新的社区分支或替代品) 可能包含更多预制的控件。不过，为了一个小小的 Switch 引入一个庞大的库可能得不偿失，需要权衡。

选择第三方资源时，考虑以下几点：