首页/ 第 10 章 · UI 界面系统/ 第 153 课
LESSON 153 · UI 界面系统

Toggle 开关

Toggle 已掌握。下一课学 Dropdown 下拉框。

⏱ 约 12 分钟📊 难度:入门🗂 第 10 章 · UI 界面系统📍 第 153 / 300 课
课程进度
153 / 300

🎯本节学习目标

  • 掌握 Toggle 创建
  • 掌握 isOn 读取
  • 掌握单选框组

🚀课程导读

“是否开声音”“选择角色职业”——Toggle 开关与单选框搞定。

Toggle 基础

勾选框。

  1. Hierarchy 右键 → UI → Toggle,创建开关。
  2. 结构:Toggle(根)→ Background → Checkmark(对勾)+ Label(文字)。
  3. 【组件属性】
  4. Is On:当前是否勾选。
  5. 【读取】toggle.isOn 返回 bool。
  6. 【设置】toggle.isOn = true;
  7. 【事件 On Value Changed】勾选变化时回调(bool 参数)。
  8. 【改文字】Label 的 TMP 文字改成“开启音效”。
  9. 【改外观】Checkmark 的 Image 是那个对勾;Background 是方框。
  10. 【注意】Toggle 的“选中样式”由 Checkmark 是否显示决定(勾选时显示)。
💡
读取开关 = toggle.isOn。设置界面大量用到。

Toggle Group 单选框

多个开关只能选一个。

  1. 【需求】“性别/职业/难度”单选:选了 A 自动取消 B。
  2. 【创建 Toggle Group】Hierarchy 右键 → UI → Toggle Group(空对象带 Toggle Group 组件)。
  3. 【设置】把组对象拖到每个 Toggle 的【Group】槽,并把 Toggle 设为 Group 的子物体。
  4. 【组属性】Allow Switch Off:是否允许全部取消(通常不勾)。
  5. 【效果】组内 Toggle 互斥:点一个自动取消其他。
  6. 【读取选中】遍历组内 Toggle 找 isOn==true 的那个:
  7. foreach (var t in GetComponentsInChildren<Toggle>()) { if (t.isOn) { Debug.Log("选中:" + t); } }
  8. 【或】用 ToggleGroup.ActiveToggles()(进阶)。
  9. 【实战】难度选择:简单/普通/困难三个 Toggle 一组,读取选中的难度。
  10. 【注意】不设 Group 则多个 Toggle 互不影响。
单选 = Toggle Group;多选 = 独立 Toggle。设置界面直接抄。

常见错误与排查

错误:Toggle 组里能同时勾多个?
原因:没设 Group 或 Group 没挂对
解决:把所有 Toggle 的 Group 槽指向同一个 Toggle Group 对象。

动手练习

课后小任务(做出来才算真的学会)

  • 做一个“开启音效”开关并读取 isOn
  • 做三个难度单选框(Toggle Group)
  • 读取当前选中的难度

本节小结

Toggle 已掌握。下一课学 Dropdown 下拉框。

完成打卡后,主站会实时更新你的学习进度 🎯

← 上一课InputField 输入框