Unity 3D 笔记（七）UGUI核心交互组件与协程应用

本篇核心知识点：UGUI 常用交互组件 Text/Image/RawImage/Button/Toggle/Dropdown/InputField/Slider/Scrollbar、协程序列帧、嵌套协程实战、Text 文本组件属性与描边阴影、富文本、Image 四种图片模式、九宫格切图、RawImage 区别、Button 三种交互模式、代码动态绑定按钮事件、Toggle 互斥分组、Dropdown 下拉菜单、InputField 输入限制与回调、Slider 进度条、Scrollbar 滚动条

一、协程复盘

1 概念

通过协程解决逐帧循环瞬间执行完毕问题，同时掌握协程嵌套实现多组分段延时输出逻辑，理解协程中断等待核心价值。

2 特性 / 规则

1. Update 内普通 for 循环会一帧遍历完所有贴图，无停留动画效果，必须使用协程 yield 等待；

2. 协程嵌套：在一个协程内部开启新协程，实现分段、分组延时逻辑；

3. 索引循环播放贴图使用取模运算防止数组越界；

4. 延时统一使用 WaitForSeconds，游戏暂停会同步暂停动画。

3 语法 & 代码片段

序列帧基础协程片段

IEnumerator PlayFrame(){ int index = 0; while(true){ img.sprite = spriteArr[index]; index = (index + 1) % spriteArr.Length; yield return new WaitForSeconds(0.1f); } }

嵌套协程片段

IEnumerator GroupPrint(){ for(int i = 1; i <= 5; i++){ Debug.Log($"第一组第{i}次"); yield return new WaitForSeconds(1); } yield return StartCoroutine(SecondGroup()); } IEnumerator SecondGroup(){ for(int i = 1; i <= 5; i++){ Debug.Log($"第二组第{i}次"); yield return new WaitForSeconds(1); } }

4 相关知识点对比

Update 循环遍历 VS 协程分段执行

普通 for 循环：一帧执行完全部逻辑，无停顿，无法实现逐帧间隔动画；

协程 yield：每切换一帧 / 等待指定时间再执行下一段，完美实现滚动、打字机动画。

5 模块拓展

简历拓展：课余可独立完成 2D 小游戏 demo，丰富项目经验，提升求职薪资上限。

二、Text 文本组件

1 概念

UGUI 文字显示核心组件，用于界面文字、提示、数值展示，支持字号、对齐、富文本、描边、阴影拓展效果。

2 特性 / 规则

1. 代码修改文字需引入using UnityEngine.UI命名空间；

2. 字号超过文本框尺寸时，开启水平 / 垂直溢出才能完整显示；

3. 富文本开启后可通过标记修改单字颜色，会覆盖组件基础颜色；

4. 立体效果二选一：Outline 描边 / Shadow 阴影，不能同时挂载；

5. Mathf.PingPong 可实现文字颜色循环流光效果。

3 语法 & 代码片段

文本赋值、颜色渐变片段

using UnityEngine.UI; private Text txt; void Start(){ txt = GetComponent<Text>(); txt.text = "测试文字"; } void Update(){ float t = Mathf.PingPong(Time.time, 1); txt.color = Color.Lerp(Color.red, Color.blue, t); }

4 相关知识点对比

Outline 描边 VS Shadow 阴影

Outline：文字外围纯色边框，立体感更强，适合标题大字；

Shadow：文字后方偏移阴影，柔和，适合小字提示。

5 模块拓展

课后作业 1：实时滚动显示系统时间文本；

课后作业 2：打字机逐字输出文字（协程 + Text 逐字符赋值）。

三、Image 与 RawImage

1 概念

Image 用于 UI 图集 Sprite 图片，支持九宫格、填充模式；RawImage 原生渲染纹理，不限制图片格式，多用于 3D 贴图、小地图、CG 序列图。

2 特性 / 规则

Image 规则

1. 图片导入类型必须设为 Sprite 才能赋值给 Image；

2. 四种渲染模式：Simple 普通、Sliced 九宫格、Tiled 平铺、Filled 填充（血条 / CD）；

3. 九宫格需安装 2D Sprite 包，裁切四角固定、中间拉伸；

4. Filled 支持 360 / 水平 / 垂直填充，用于技能冷却、血量条。

RawImage 规则

1. 不限制图片导入格式，可直接加载 Texture；

2. 无九宫格、填充、自适应尺寸功能，仅基础 UV 渲染；

3. 多用于小地图、3D 模型实时贴图、CG 动画背景。

3 语法 & 代码片段

动态切换图片、填充进度片段

private Image skillImg; // 切换贴图 skillImg.sprite = newSprite; // 修改填充进度实现CD skill.fillAmount = cdTimer / totalCd;

4 相关知识点对比

Image VS RawImage

Image：适配 UI 图集，九宫格 / 填充 / 自适应齐全，背包、按钮、界面图片首选；

RawImage：无 UI 专用优化，仅特殊贴图、小地图场景使用。

5 模块拓展

九宫格实战：弹窗、对话框边框拉伸不变形；填充模式制作技能冷却遮罩。

四、Button 按钮组件

1 概念

UGUI 标准交互组件，处理鼠标 / 触屏点击，提供颜色、图片、动画三种切换状态，支持代码动态绑定点击回调。

2 特性 / 规则

1. Interactable 勾选控制按钮是否可点击，取消后完全无交互；

2. 三种状态切换模式：ColorTint 颜色、SpriteSwap 贴图、Animation 动画；

3. Navigation 导航仅 PC 键盘上下左右选中按钮，手游项目几乎不用；

4. 拖拽绑定仅做了解，工程统一使用代码动态注册事件；

5. 原生 UnityAction 委托无参数，传参需嵌套匿名函数封装。

3 语法 & 代码片段

代码绑定按钮（无参 / 带参）

private Button btn; void Start(){ // 无参绑定 btn.onClick.AddListener(ClickFunc); // 带参封装 btn.onClick.AddListener(()=>ClickWithArg(10)); } void ClickFunc(){ Debug.Log("点击按钮"); } void ClickWithArg(int num){ Debug.Log("参数："+num); }

4 相关知识点对比

拖拽赋值绑定 VS 代码动态绑定

拖拽：编辑器手动绑定，多人协作易丢失引用，工程禁用；

代码绑定：自动化管理，预制体 / 动态生成物体通用，项目标准写法。

5 模块拓展

课后作业：制作技能 CD 按钮，结合 Image 填充 + Text 倒计时同步显示冷却剩余时间。

五、Toggle 复选框组件

1 概念

单选 / 多选框，用于设置勾选、筛选分类，搭配 ToggleGroup 实现同组互斥（只能选中一个）。

2 特性 / 规则

1. isOn 布尔值控制勾选状态，状态切换触发 onValueChanged 回调；

2. ToggleGroup 分组后组内 Toggle 互斥，取消 “Allow Switch Off” 则至少保留一个选中；

3. 常用于音量开关、画质选项、背包分页切换。

3 语法 & 代码片段

private Toggle toggle; void Start(){ toggle.onValueChanged.AddListener(OnToggleChange); } void OnToggleChange(bool isSelect){ if(isSelect) Debug.Log("已勾选"); }

4 相关知识点对比

独立 Toggle VS ToggleGroup 分组 Toggle

独立：可同时多选，设置勾选、静音开关；

分组：互斥单选，分页、画质档位切换专用。

5 模块拓展

背包分页系统：多 Toggle 分组切换装备 / 药品 / 材料界面。

六、Dropdown 下拉菜单

1 概念

下拉选择组件，展开多个选项，选中后返回索引，用于物品排序、筛选功能。

2 特性 / 规则

1. Template 为下拉选项模板，运行自动克隆生成选项；

2. onValueChanged 回调返回选中选项 int 索引；

3. 同一索引重复点击不会重复触发回调。

3 语法 & 代码片段

下拉选项监听

private Dropdown drop; void Start(){ drop.onValueChanged.AddListener(SelectItem); } void Select(int index){ switch(index){ case 0: 按等级排序; break; case 1: 按金币排序; break; } }

4 相关知识点对比

Dropdown VS Toggle 分组

Dropdown：收起节省界面空间，选项多使用；

Toggle：全部选项平铺展示，选项少、需要快速切换使用。

5 模块拓展

商城筛选、背包物品分类排序功能开发。

七、InputField 输入框

1 概念

接收玩家文字 / 数字输入，用于登录、聊天、商城数量输入，支持输入类型限制、占位提示、多类回调。

2 特性 / 规则

1. ContentType 限制输入类型：数字、邮箱、密码、姓名等；

2. Placeholder 为未输入时灰色提示文字；

3. 三大回调：onValueChanged 每输入字符触发、onEndEdit 失去焦点触发、onSubmit 回车提交；

4. 密码模式界面显示 *，程序内文本明文，项目需加密传输。

3 语法 & 代码片段

获取输入文本

private InputField input; void Start(){ input.onEndEdit.AddListener(InputFinish); } void InputFinish(string content){ Debug.Log("输入内容："+content); }

4 相关知识点对比

onValueChanged VS onEndEdit

onValueChanged：输入任意字符立即触发，实时校验；

onEndEdit：点击空白 / 回车后触发，聊天、登录提交首选。

5 模块拓展

登录账号密码输入、聊天发送框、商城购买数量输入。

八、Slider 滑动进度条 & Scrollbar 滚动条

1 概念

Slider 可调数值进度条（血量、加载、音量）；Scrollbar 搭配 ScrollRect 实现面板滚动。

2 特性 / 规则

1. Slider 可自定义最大最小值，onValueChanged 监听数值变化；

2. Scrollbar 取值固定 0~1，Number Of Steps 控制滑动阶梯；

3. 游戏加载进度条视觉均为假，资源加载完成才会跳转场景。

3 语法 & 代码片段

Slider 数值监听

private Slider slider; void Start(){ slider.onValueChanged.AddListener(ChangeValue); } void Change(float val){ Debug.Log("当前数值："+val); }

4 相关知识点对比

Slider VS Scrollbar

Slider：自定义数值区间，音量、加载、血量；

Scrollbar：固定 0~1，仅用于滚动视图配套。

5 模块拓展

游戏加载界面、音量调节滑动条。

综合拓展

1. UI 组件开发规范：界面交互逻辑全部代码动态绑定，禁止编辑器拖拽赋值；图片统一使用 Sprite 类型，界面背景使用九宫格适配多分辨率。

2. 性能优化要点：静态无交互 UI 关闭 Raycaster；大量滚动列表使用对象池复用 Item；不需要实时更新文本减少每帧赋值。

3. 高频 Bug 排查方案：按钮点不动检查 Interactable 与 EventSystem；图片不显示检查 Sprite 导入类型；输入无法输入核对 ContentType 限制。

4. 进阶拓展学习方向：ScrollRect 滚动视图、UI 动画、图集打包、TMP 高性能文本、UI 事件传递遮罩。