深入解析UGUI:从原理到源码实战 UGUI 可以理解成一套“基于 GameObject/Component 的 retained-mode UI 系统”。也就是说按钮、图片、文本、布局节点都是真实的GameObject挂着RectTransform、Graphic、Selectable、LayoutGroup等组件。Unity 每帧或在脏标记触发时收集这些组件状态生成网格交给 Canvas 渲染。核心原理UGUI 的主干可以拆成几层Transform 层RectTransform普通 3D 物体用TransformUGUI 用RectTransform。它负责 UI 的二维布局数据anchorMin / anchorMaxpivotanchoredPositionsizeDeltaoffsetMin / offsetMaxUGUI 的自适应、本地坐标、父子布局本质都建立在RectTransform上。渲染层Canvas GraphicCanvas是 UI 的渲染根节点。常见渲染模式Screen Space - OverlayScreen Space - CameraWorld Space可渲染 UI 组件一般继承自UnityEngine.UI.Graphic例如ImageRawImageTextMaskableGraphicGraphic的核心职责是标记顶点脏、材质脏、布局脏生成 UI 网格提供射线检测入口注册到GraphicRegistry通过CanvasRenderer把网格交给底层渲染简化流程UI 属性变化 - SetVerticesDirty / SetMaterialDirty / SetLayoutDirty - CanvasUpdateRegistry 收集 - Rebuild - Graphic.OnPopulateMesh - CanvasRenderer.SetMesh / SetMaterial - Canvas 渲染网格生成VertexHelperUGUI 不是直接画“图片”或“文字”而是生成 mesh。例如Image会根据类型生成不同网格Simple一个矩形两组三角形Sliced九宫格网格Tiled平铺网格Filled扇形/横向/纵向填充网格典型方法protected override void OnPopulateMesh(VertexHelper vh)VertexHelper用来填充顶点、UV、颜色、三角形索引。批处理Canvas BatchUGUI 的渲染批处理主要发生在 Canvas 级别。影响合批的因素包括是否在同一个 Canvas 下材质是否相同贴图是否相同或是否在同一个 Atlas是否有 Mask / RectMask2D层级顺序是否打断是否使用不同 shader、stencil、clip 状态一个重要特点Canvas 下任意 UI 变脏可能导致该 Canvas 重新构建一部分甚至大量批次。所以复杂 UI 通常会拆 Canvas静态背景一个 Canvas高频变化血条/倒计时一个 Canvas弹窗一个 Canvas滚动列表一个 Canvas事件层EventSystemUGUI 输入事件不直接靠MonoBehaviour.Update分发而是由EventSystem统一处理。主要结构EventSystem - BaseInputModule - StandaloneInputModule / InputSystemUIInputModule - Raycaster - GraphicRaycaster - PhysicsRaycaster - ExecuteEvents - IPointerClickHandler - IDragHandler - ISubmitHandler ...鼠标点击按钮的大致流程EventSystem.Update - InputModule 读取输入 - GraphicRaycaster 找到命中的 Graphic - 按 Sorting / Depth 排序 - ExecuteEvents 执行接口 - Button.OnPointerClick - Button.onClick.Invoke()交互控件层Selectable很多交互控件继承自UnityEngine.UI.Selectable例如ButtonToggleSliderScrollbarDropdownInputFieldSelectable负责通用交互状态NormalHighlightedPressedSelectedDisabled并通过ColorTint、SpriteSwap、Animation等方式更新视觉。布局层Layout System自动布局主要由几类接口串起来ILayoutElement ILayoutController ILayoutGroup ILayoutSelfController常见组件HorizontalLayoutGroupVerticalLayoutGroupGridLayoutGroupContentSizeFitterAspectRatioFitterLayoutElement布局刷新大致分为CalculateLayoutInputHorizontal SetLayoutHorizontal CalculateLayoutInputVertical SetLayoutVertical所以 UGUI 布局是有顺序的复杂嵌套布局容易产生 rebuild 成本。源码大致框架UGUI 源码核心命名空间一般是UnityEngine.UI UnityEngine.EventSystems大致目录结构可以按功能理解UnityEngine.UI ├── Core │ ├── Graphic │ ├── MaskableGraphic │ ├── CanvasUpdateRegistry │ ├── GraphicRegistry │ ├── CanvasScaler │ ├── CanvasRenderer // 底层由 UnityEngine 提供 │ └── VertexHelper │ ├── Controls │ ├── Image │ ├── RawImage │ ├── Text │ ├── Button │ ├── Toggle │ ├── Slider │ ├── Scrollbar │ ├── ScrollRect │ ├── Dropdown │ └── InputField │ ├── Layout │ ├── LayoutGroup │ ├── HorizontalLayoutGroup │ ├── VerticalLayoutGroup │ ├── GridLayoutGroup │ ├── ContentSizeFitter │ ├── AspectRatioFitter │ ├── LayoutElement │ └── LayoutRebuilder │ ├── Mask │ ├── Mask │ ├── RectMask2D │ ├── MaskUtilities │ └── StencilMaterial │ ├── EventSystem │ ├── EventSystem │ ├── BaseInputModule │ ├── PointerInputModule │ ├── StandaloneInputModule │ ├── BaseRaycaster │ ├── GraphicRaycaster │ ├── ExecuteEvents │ └── EventInterfaces │ └── Utility ├── ListPool ├── ObjectPool ├── SetPropertyUtility └── Misc helpers几个最值得看的类如果你想读源码建议顺序是Graphic看 UGUI 渲染组件的基类重点看SetVerticesDirtySetMaterialDirtyRebuildOnPopulateMeshRaycastCanvasUpdateRegistry看 UGUI 如何延迟 rebuild以及布局和图形重建的顺序。Image看一个具体控件如何生成 mesh。GraphicRaycaster看 UGUI 如何做点击检测。Selectable/Button看交互状态机和事件触发。LayoutRebuilder/LayoutGroup看自动布局如何递归计算。Mask/RectMask2D看遮罩、裁剪、stencil 的处理方式。一句话总结UGUI 的本质是GameObject 组件树 RectTransform 布局 Graphic 生成网格 Canvas 批处理渲染 EventSystem 输入派发 LayoutSystem 自动布局它不是立即模式 UI而是组件状态驱动的 UI 系统。属性变化后标脏之后由 CanvasUpdateRegistry 统一重建布局和网格最后 CanvasRenderer 交给 Unity 底层渲染。