UGUI核心规则

基础概念

UGUI 的核心可以拆成五条线：

Canvas 负责渲染范围
RectTransform 负责 UI 坐标和适配
Graphic 负责显示和射线命中
EventSystem 负责输入事件分发
Layout 负责自动排版

1. Canvas：UGUI 的渲染根

所有 UGUI 元素都必须放在 Canvas 下面。Canvas 可以理解成 UI 的“画布”和“渲染批次管理单位”。

常见 Render Mode：

模式	作用	常见用途
Screen Space - Overlay	UI 直接覆盖屏幕	普通 HUD、菜单、弹窗
Screen Space - Camera	UI 由指定相机渲染	需要 UI 和相机效果配合
World Space	UI 存在于 3D 世界中	血条、3D 面板、VR UI

重要规则： Canvas 下面的 UI 如果频繁变化，比如文字变化、图片变化、位置变化，Canvas 可能会触发重建。所以大型项目不要所有 UI 都塞进一个 Canvas。

推荐拆分：

Canvas_HUD        血条、金币、常驻状态
Canvas_Panel      背包、设置、任务界面
Canvas_Popup      确认框、奖励弹窗
Canvas_Guide      新手引导、遮罩
Canvas_Toast      飘字、提示消息

2. Canvas 排序：谁盖住谁

同一个 Canvas 内，Hierarchy 中越靠下的 UI，通常显示越靠前。

例如：

Canvas
 ├─ Background
 ├─ MainPanel
 ├─ Popup
 └─ GuideMask

这里 GuideMask 通常会盖在最上面。

多个 Canvas 之间主要看：

属性	作用
Sorting Layer	UI 所在排序层
Order in Layer	同层级下的顺序
Override Sorting	子 Canvas 是否脱离父 Canvas 单独排序

教程建议： 弹窗、遮罩、新手引导一般使用更高的 Order in Layer。

3. Canvas Scaler：屏幕适配核心

Canvas Scaler 控制 Canvas 下 UI 的整体缩放。

最常用配置：

UI Scale Mode: Scale With Screen Size
Reference Resolution: 1920 x 1080 或 1080 x 1920
Screen Match Mode: Match Width Or Height
Match: 0 到 1

Match = 0 更跟随宽度。 Match = 1 更跟随高度。 横屏项目常用 1920 x 1080，竖屏项目常用 1080 x 1920。

注意： UI 适配问题通常不是 Canvas Scaler 一个组件造成的，而是 Canvas Scaler + Anchor 锚点 一起决定的。

4. RectTransform：UI 的坐标系统

UGUI 不使用普通 Transform 来控制尺寸，而是使用 RectTransform。

核心属性：

属性	作用
Anchor	决定 UI 跟随父物体的哪个区域
Pivot	决定缩放、旋转、尺寸变化的中心点
Anchored Position	相对锚点的位置
Size Delta	相对锚点区域的尺寸差
Width / Height	UI 元素宽高
Left / Right / Top / Bottom	拉伸模式下的边距

最重要的理解：

Anchor 决定“跟谁走”
Pivot 决定“从哪里变”
Position 决定“偏移多少”
Size 决定“占多大”

做适配时，应该先设置 Anchor，再调位置和尺寸。不要只靠拖拽摆位置。

5. Graphic：显示和命中的基础

UGUI 中很多可见元素都继承自 Graphic，例如：

Image
RawImage
Text
TextMeshProUGUI

Graphic 负责：

显示颜色
显示图片或文字
生成 UI 顶点
参与 Canvas 渲染
决定是否 Raycast Target

Raycast Target 很关键。 一个 UI 看得见，不代表它能被点击。只有开启 Raycast Target，并且被 Graphic Raycaster 检测到，才可能响应点击。

6. EventSystem：输入事件总调度

EventSystem 是 UI 输入系统的大脑。它负责处理：

鼠标点击
触摸
拖拽
键盘导航
手柄导航
输入框焦点
按钮提交

如果场景中没有 EventSystem，Button、Toggle、Slider、InputField 等 UI 通常就不能正常响应点击。

事件大概流程：

鼠标 / 触摸输入
        ↓
EventSystem
        ↓
Input Module
        ↓
Graphic Raycaster
        ↓
找到命中的 UI
        ↓
调用点击、拖拽、提交等接口

7. Graphic Raycaster：UI 点击检测

Graphic Raycaster 挂在 Canvas 上，用来检测鼠标或触摸是否点中了 UI。

它会做这些事：

收集 Canvas 下可被射线检测的 Graphic
判断鼠标位置是否在 UI 矩形内
根据层级、深度、距离排序
把事件交给最上层命中的 UI

常见问题：

问题	原因
按钮点不到	没有 EventSystem，或被上层 UI 挡住
点到了下面的按钮	上层遮罩没有 Raycast Target
装饰图影响点击	装饰图开启了 Raycast Target
3D 点击被 UI 挡住	没判断鼠标是否在 UI 上

常用代码：

if (UnityEngine.EventSystems.EventSystem.current.IsPointerOverGameObject())
{
    return;
}

意思是：如果鼠标正在点 UI，就不要继续做 3D 世界点击检测。

8. 事件穿透：为什么点到下面去了

事件穿透就是：上层 UI 没有挡住点击，点击继续落到了下面的 UI 或 3D 物体上。

常见原因：

Image 的 Raycast Target 没勾
CanvasGroup 的 Blocks Raycasts 关闭
上层对象没有 Graphic 组件
透明区域没有可命中的 UI
事件被代码继续传给了下层

遮罩层推荐配置：

Image
勾选 Raycast Target
颜色 Alpha 可以很低
CanvasGroup Blocks Raycasts = true

如果弹窗关闭但对象还在场景里，可以这样：

CanvasGroup.alpha = 0
CanvasGroup.interactable = false
CanvasGroup.blocksRaycasts = false

9. 事件传递：UGUI 不是网页 DOM 冒泡

UGUI 的事件机制和网页 DOM 不完全一样。 它不是标准的“从子节点自动冒泡到所有父节点”。

通常是：

Raycaster 找到命中对象
EventSystem 调用该对象上的事件接口
Button / Toggle / Slider 自己处理状态
需要父子都响应时，通常手动转发

常见事件接口：

IPointerClickHandler
IPointerDownHandler
IPointerUpHandler
IBeginDragHandler
IDragHandler
IEndDragHandler
ISubmitHandler
ISelectHandler
IDeselectHandler

10. Layout：自动排版系统

Layout 系统适合做动态 UI，比如背包格子、排行榜、聊天列表。

常见组件：

组件	作用
Horizontal Layout Group	横向排列子物体
Vertical Layout Group	纵向排列子物体
Grid Layout Group	网格排列
Layout Element	给子物体提供尺寸建议
Content Size Fitter	根据内容反向改变自身尺寸

常见组合：

Scroll View
 └─ Viewport
     └─ Content
         ├─ Vertical Layout Group
         ├─ Content Size Fitter
         └─ Item

注意： 不要让父物体和子物体在同一个方向上互相控制尺寸，否则容易出现布局抖动或 Unity 警告。

11. Mask 与 RectMask2D

Mask 和 RectMask2D 都用于裁剪 UI。

组件	特点	常见用途
Mask	按 Image 形状裁剪	圆形头像、异形遮罩
RectMask2D	按矩形裁剪	Scroll View、列表窗口

普通滚动列表优先用 RectMask2D。 圆形头像、特殊形状才用 Mask。

12. CanvasGroup：整组控制

CanvasGroup 可以一次控制一组 UI。

属性	作用
Alpha	整组透明度
Interactable	整组是否可交互
Blocks Raycasts	整组是否挡点击
Ignore Parent Groups	是否忽略父级 CanvasGroup

它特别适合控制弹窗淡入淡出、禁用整个面板、遮挡点击。

13. Selectable：按钮类控件的基类

这些控件都属于 Selectable：

Button
Toggle
Slider
Scrollbar
Dropdown
InputField

它们都有类似状态：

Normal
Highlighted
Pressed
Selected
Disabled

所以你看到 Button、Toggle、Slider、Dropdown 里都有：

Interactable
Transition
Target Graphic
Navigation
On Value Changed / On Click

这是因为它们共享同一套交互基础。

14. UGUI 性能核心

UGUI 性能主要关注这些点：

Canvas Rebuild
Layout Rebuild
Raycast 检测数量
Overdraw
Mask / Shadow / Outline
动态文字和图片变化
滚动列表对象数量

优化建议：

静态 UI 和动态 UI 分 Canvas
弹窗单独 Canvas
滚动列表使用对象池
装饰图关闭 Raycast Target
少用 Shadow / Outline / Mask
频繁变化的数字和图标不要放进超大 Canvas

15. 结论

你可以在文档里这样总结：

UGUI 不是单个组件，而是一套协作系统。

Canvas 决定 UI 在哪里渲染、如何排序、什么时候重建。
RectTransform 决定 UI 的位置、尺寸、锚点和屏幕适配。
Graphic 决定 UI 显示什么，以及是否参与点击检测。
Graphic Raycaster 负责判断鼠标或触摸命中了哪个 UI。
EventSystem 负责把输入事件分发给 Button、Toggle、Slider 等控件。
Layout 系统负责自动排列和自适应尺寸。
CanvasGroup、Mask、RectMask2D 负责整组状态和可见区域控制。

参考链接： Unity Canvas 文档Unity Canvas Scaler 文档Unity EventSystem 文档Unity Graphic Raycaster 文档Unity CanvasGroup 文档Unity UI 优化建议