Button 按钮详解

🎯本节学习目标

• 掌握按钮组件
• 掌握过渡效果
• 掌握动态按钮

🚀课程导读

按钮是 UI 交互的“主力”。本课把它从上到下讲透：状态、效果、事件、动态生成。

◆Button 组件属性

认识按钮的“身体”。

1. 创建 UI → Button - TextMeshPro，得到按钮对象（含 Image + Button 组件 + TMP 子物体）。
2. 【Interactable 可交互】勾选则可点；取消则按钮变“禁用”状态（变灰/不可点）。
3. 【Transition 过渡】按钮在不同状态下的视觉效果：
4. ① Color Tint（默认）：不同状态变颜色。
5. Target Graphic：应用过渡的图片；Normal/Highlighted/Pressed/Selected/Disabled 五色。
6. ② Sprite Swap：换图（需要多张状态图）。
7. ③ Animation：自定义动画（用 Animator）。
8. 【Navigation】键盘/手柄导航：默认 Automatic（自动判断上下左右）；可设为 None 禁用。
9. 【On Click ()】点击事件列表：加监听、绑方法（第 123 课）。

◆动态创建与批量按钮

代码生成按钮。

1. 【代码创建】需要 using UnityEngine.UI; 与 TMPro;
2. Button newBtn = GameObject.Find("Canvas").AddComponent<Button>();（先有 Image）
3. 更常用：从预制体实例化按钮（第 76 课）然后绑定事件。
4. 【事件传参】批量生成多个按钮时，给每个按钮绑定不同参数：
5. for (int i = 0; i < 5; i++) {
6. Button b = Instantiate(btnPrefab, parent).GetComponent<Button>();
7. int level = i + 1; // 捕获循环变量
8. b.onClick.AddListener(delegate { LoadLevel(level); });
9. b.GetComponentInChildren<TMP_Text>().text = "关卡 " + level;
10. }
11. 【注意】循环里用局部变量捕获 i（int level = i+1），否则所有按钮都读到最后一个 i。
12. 【布局】配合 Layout Group 自动排列（第 156 课）。
13. 【禁用单个】b.interactable = false;（未解锁关卡灰显）。
14. 【实战】做一个“关卡选择”界面：5 个按钮，点击进入对应关卡。

⚠常见错误与排查

★动手练习

✓本节小结

Button 已掌握。下一课学 Slider 滑动条。