UI System

PublishDate: 2025-06-01 | CreateDate: 2025-06-01 | LastModify: 2025-06-01 | Creator：ljf12825

Unity UI系统是Unity引擎内置的用于构建用户界面的工具集。它基于Canvas（画布）架构，支持制作按钮、文本、图片、滑动条、输入框等各种交互元素

UGUI和NGUI

特性	UGUI（Unity GUI）	NGUI（Next-Gen UI）
开发方	Unity 官方	第三方（Tasharen Entertainment）
引入版本	Unity 4.6+ 内置	Unity 3.x 时期的主流 UI 插件
集成性	原生集成，支持 Canvas、EventSystem、Animation 等	插件形式，较早期版本需手动集成
渲染系统	使用 Unity 内部渲染系统（Canvas）	自定义渲染系统，Draw Call 优化依赖面板拆分
编辑器支持	所见即所得，Scene View 拖拽 UI	早期需要反复预览，后期版本改善较多
多分辨率适配	有自动布局系统、Anchor、RectTransform	依赖自定义 Anchor 系统
动画支持	支持 Unity Animation 和 Animator	原生支持有限，需自定义组件
事件系统	支持原生 EventSystem（点击、拖拽等）	使用自己的事件系统
社区和文档	官方支持，Unity 文档齐全	社区活跃度下降，文档依赖作者和社区
性能	对大型复杂 UI 会产生较多 Draw Call，需要合批优化	更早期对 Draw Call 优化做得较极致，但维护成本高
是否推荐使用	推荐（Unity 官方支持）	不推荐新项目使用（已过时）

NGUI是在Unity官方UI系统还不成熟时的“事实标准”，很多Unity3.x和4.x的项目大量使用
UGUI时Unity官方退出的新UI系统，功能更强大，易于扩展，且原生支持多平台和工具链

CreateUI

UnityUI2.0.0

Canvas

Canvas是Unity中所有UI元素的容器，所有UI控件都必须是Canvas的子对象，否则它们不会被渲染成UI

CanvasInspector

Canvas的渲染模式

Canvas有三种渲染模式，不同模式影响UI的显示方式、渲染顺序以及与摄像机的关系

1.Screen Space - Overlay（屏幕空间覆盖）

这是默认模式
UI直接渲染在屏幕上，始终覆盖在游戏视图的最上层
不受任何摄像机影响，不需要摄像机参与渲染
适合制作固定在屏幕上的HUD、血条、菜单等
优点：渲染简单，效率高
缺点：无法与3D世界产生深度关系，UI始终在前面

2.Screen Space - Camera（屏幕空间摄像机）

UI挂载在指定的摄像机前面
通过摄像机来渲染UI，UI会与摄像机的视锥和深度产生关系
允许UI元素首摄像机影响（缩放、视角变化）
常用于需要与摄像机视角联动的UI，例如放大镜效果、视角内提示等
可以控制UI的排序顺序（Sorting Layer和Order in Layer）

3.World Space（世界空间）

UI作为3D场景中的普通物体存在
有自己的位置、旋转、缩放，可以放在场景中任意位置
通过普通摄像机渲染，能与3D模型、光照等交互
适合制作3D菜单、游戏内面板、悬浮信息
需要调整Canvas的大小和UI元素的尺寸，比较复杂

Canvas组件的重要属性

Screen Space - Overlay

CanvasScreenSpace-Overlay

默认模式

Render Mode：渲染模式，见上文
Pixel Perfect：像素完美，开启后UI元素会对齐到像素点，减少模糊，适合2D像素风UI
Sort Order：控制UI元素渲染顺序，决定了多个Canvas之间的渲染优先级，数值越大，渲染层级越靠前，会覆盖数值较小的Canvas；数值相同，会根据它们在Hierarchy中的位置决定前后
Target Display：该Canvas渲染到哪一个物理显示器上，这个功能主要用在多显示器应用中，默认Unity只是用主显示器（Display1），有八个可选项，必须在代码中手动启动多个显示器 if (Dispaly.display.Length > 1) Display.display[1].Activate();（启用Display 2）
Additional Shader Channels：用于指定UI顶点需要传递给Shader的额外数据通道当你使用自定义UI Shader（比如为按钮添加特效、动画、描边等）时，可能需要从UI元素的每个顶点传递一些额外数据（如颜色、UV1、法线、Tangent等）到Shader中。而默认Canvas并不会传递这些数据，只有你在Additional Shader Channels中显式勾选，Unity才会将这些数据从CPU传给GPU 可选项说明：
- TexCoord1：第二套UV坐标，一些Shader特效可能使用
- TexCoord2：第三套UV坐标
- TexCoord3：第四套UV坐标
- Normal：法线信息（常用于光照Shader）
- Tangent：切线信息（常与法线贴图配合）
- Color：颜色通道（通常UI默认传递的是主颜色）
Unity的UI是通过CanvasRenderer生成的顶点数据送入GPU，默认只传position、uv0、color；若Shader需要额外通道，必须通过Additional Shader Channels显式开启，让Canvas包装完整数据；但需要注意，勾选越多，传输数据越大，性能开销越大（尤其是在移动端）
Vertex Color Always In Gamma Color Space：控制UI顶点颜色是否始终使用Gamma空间进行处理，无论当前项目是否使用Linear或Gamma颜色空间

Screen Space - Camera

CanvasScreenSpace-Camera

Render Camera：The Camera whitch will render the canvas. This is also the camera used to send events A Screen Space Canvas with no specified camera acts like an Overlay Canvas

World Space

CanvasWorldSpace

Event Camera：用于处理射线点击UI的相机（通常是主摄像机），必须设置，否则点击无效

CanvasScaler

Canvas通常会搭配CanvasScaler使用，控制UI的缩放和适配，CanvasScaler用于根据不同分辨率、屏幕尺寸，动态调整UI大小，保证UI在不同设备上的一致性

三种缩放模式

1.Constant Pixel Size（固定像素大小）

Constant Pixel Size

UI元素大小固定为设计时的像素值，不会随屏幕尺寸变化缩放
适合UI对像素精度要求高，不想变形的场景
缺点：不同分辨率下UI大小不一致，低分辨率屏幕上UI显得很大，高分辨率上显得很小

参数：

Scale Factor：控制Canvas上所有UI元素的整体缩放倍数
Reference Pixels Per Unit：单位像素参考值，决定1个世界单位中包含多少个像素

2.Scale With Screen Size（随屏幕尺寸缩放）

Scale With Screen Size

根据屏幕分辨率，按比例缩放UI，使得UI在不同分辨率下保持视觉一致
通过Reference Resolution设置参考设计分辨率
通过Screen Match Mode决定缩放如何适配宽高比
- Match Width Or Height：在宽和高之间插值，Match属性控制偏重那一边（0为宽，1为高）
- Expand：适配屏幕，保证UI不会裁剪，但可能留空白
- Shrink：保证UI填满屏幕，可能裁剪一部分
这是最常用的模式，推荐用于大多数UI适配

3.Constant Physical Size（固定物理大小）

Constant Physical Size

UI元素在物理尺寸上保持不变（以英寸、毫米为单位），无论屏幕分辨率如何变化
依赖设备DPI（屏幕像素密度），适用于对物理尺寸有要求的UI

参数：

Physical Unit：物理单位，告诉Unity希望使用哪种单位作为UI元素的尺寸基准可选项：
- Points
- Pixels
- Millimeters
- Centimeters
- Inches
Fallback Screen DPI：当Unity无法获取当前设备的DPI时，就会使用这个值来代替实际DPI
Default Sprite DPI：控制UI中Sprite贴图的物理尺寸缩放基准

Graphic Raycaster

在屏幕空间内把点击（Pointer）或触摸事件，转换成UI元素的响应事件

面板属性：

属性名	说明
Ignore Reversed Graphics	是否忽略背面 UI 图形（比如被旋转了 180° 的 UI 元素）
Blocking Objects	控制是否允许 3D/2D 物体阻挡 UI 点击（比如 3D 模型挡住了按钮）
Blocking Mask	用于限制哪些 Layer 的物体会阻挡 UI 射线

工作原理：UI射线检测

当你点击屏幕时，Unity的Event System会：

发出一条射线（Ray）
交给Grphic Raycaster
Graphic Raycaster会检测这条射线是否与某些UI元素相交
若相交，就触发这些元素的OnPointerClick()、OnPointerDown()、OnDrag()等事件

要让Graphic Paycaster正常工作，必须保证：

Canvas上挂了Graphic Raycaster
场景中有一个Event System
UI元素上有Graphic组件（如Image、Text，才能被Raycaster检测到）
UI元素有Raycast Target为勾选状态
没有被Canvas Group阻挡（其Blocks Raycasts属性必须为true）

Canvas Group

CanvasGroupPanel

控制一组UI元素的整体透明度、交互性和射线响应
用它可以实现：

一整个面板淡入淡出
临时禁用一组按钮
某些UI遮罩区域不响应点击

属性

属性名	类型	作用
Alpha	`float` (0 ~ 1)	控制透明度，0 = 全透明，1 = 不透明。会影响 UI 的视觉透明和交互性（如果 Block Raycasts = true）
Interactable	`bool`	是否允许子元素响应交互事件（如点击 Button）
Blocks Raycasts	`bool`	是否拦截 UI 射线，决定子元素是否能被点击、拖动等
Ignore Parent Groups	`bool`	是否忽略父级 Canvas Group 的控制（重要属性）

Canvas的层级关系

Unity允许UI层级中存在多个Canvas组件，这时，Canvas本身就能作为字节点存在，形成嵌套结构

子Canvas布置主Canvas的一部分，它是一个“独立渲染单元”
每个Canvas都是一个独立的渲染批次（Draw Call）
子Canvas不会因为父Canvas中其他UI元素变化而重绘，反之亦然

为什么要用子Canvas

子Canvas主要用于优化性能和分离逻辑

性能优化

如果你有一个排行榜界面，只有当排行榜打开时才需要刷新内容，其他UI不变，这可以这样：

Canvas(主UI)
|——背景UI(静态)
|——Canvas(排行榜) <- 单独Canvas，打开时才激活和更新

这样排行榜刷新不会引起整个主UI Canvas的重建批次

UI分区逻辑清晰

把HUD、弹窗、系统提示各放到子Canvas中，方便管理和控制层级、显隐、动画等

父子Canvas的排序 & 显示顺序

排序层控制（Sorting Layer + Order in Layer）

每个Canvas都有：

Sorting Layer（图层）
Order in Layer（在该图层的顺序）这两个参数决定Canvas之间的渲染先后顺序，数值越高越在前，越晚渲染

Canvas HUD(Sorting Layer: UI, Order: 0)
Canvas Popup(Sorting Layer: UI, Order: 10)

Popup会在HUD上方显示，即使它是子物体也一样

RectTransform父子关系的影响

子UI元素会继承父节点的位置、旋转、缩放等变换
子UI的位置是相对于父节点的（本地坐标）
适用于做面板嵌套、按钮列表、滑动区域等结构

Canvas性能

尽量减少Canvas数量，因为每个Canvas都是单独的渲染批次
将频繁变动的UI元素放到单独的Canvas，避免整个UI重绘
使用Canvas Group控制UI整体显示和透明度，可以减少重绘
关闭不需要显示的UI，避免额外渲染

Canvas API

Properties

属性名	类型	说明	常见用途
`renderMode`	`RenderMode`	渲染模式（Overlay、ScreenSpaceCamera、WorldSpace）	决定Canvas如何渲染和视图方式
`worldCamera`	`Camera`	渲染用摄像机（适用于 Camera、World 模式）	控制UI投射方向、接收事件
`pixelPerfect`	`bool`	是否启用像素完美对齐（仅限Screen Space）	像素风格游戏的UI清晰对齐
`planeDistance`	`float`	距摄像机的距离（仅Screen Space - Camera）	控制Canvas深度层级
`scaleFactor`	`float`	缩放因子（通常由 CanvasScaler 控制）	适配不同分辨率
`referencePixelsPerUnit`	`float`	每单位像素数，决定图像缩放清晰度	确保 UI 图像缩放一致
`sortingLayerID`	`int`	渲染图层 ID	控制 Canvas 渲染层
`sortingLayerName`	`string`	渲染图层名称	可读性更强的层级控制
`sortingOrder`	`int`	同图层中的渲染顺序，越大越前面	控制 UI 显示前后关系
`overrideSorting`	`bool`	是否覆盖父 Canvas 的排序逻辑	弹窗、特效UI 的独立排序
`targetDisplay`	`int`	目标显示屏幕编号（用于多显示器）	多屏幕UI部署
`isRootCanvas`	`bool` (只读)	是否为根 Canvas	判断是否主 Canvas（用于布局判断）
`rootCanvas`	`Canvas` (只读)	所属的顶级 Canvas	获取当前 Canvas 的上级主容器
`renderOrder`	`int` (只读)	实际渲染顺序（自动计算）	调试 Canvas 渲染先后
`pixelRect`	`Rect` (只读)	当前 Canvas 实际的像素渲染区域	渲染区域调试
`renderingDisplaySize`	`Vector2` (只读)	渲染显示区域的像素尺寸	获取目标显示区域尺寸
`overridePixelPerfect`	`bool`	是否允许覆盖父Canvas的像素对齐设置	子 Canvas 不启用像素对齐时用
`additionalShaderChannels`	`AdditionalShaderChannels`	指定额外的 shader 顶点数据传输通道	用于自定义UI Shader
`cachedSortingLayerValue`	`int` (只读)	当前排序图层的底层缓存值，用于排序计算	系统内部优化（一般不手动使用）
`normalizedSortingGridSize`	`float`	Canvas 分割的排序网格单元大小	高阶排序控制，与 SRP 结合使用
`updateRectTransformForStandalone`	`bool`	在手动 `Camera.Render()` 时是否自动更新 RectTransform	手动渲染UI场景
`vertexColorAlwaysGammaSpace`	`bool`	在使用线性空间渲染时是否强制顶点颜色使用 Gamma 空间传递	确保 UI 颜色一致性（线性渲染）

Static Method

方法名	返回类型	描述	常见用途
`Canvas.ForceUpdateCanvases()`	`void`	强制更新所有 Canvas 的布局和绘制内容	用于在下一帧前立即刷新 UI 状态（比如修改布局元素后）
`Canvas.GetDefaultCanvasMaterial()`	`Material`	返回一个默认 Canvas 材质，用于普通 UI 元素的渲染	如果需要自定义绘制或替换默认材质时使用
`Canvas.GetETC1SupportedCanvasMaterial()`	`Material`	获取或生成支持 ETC1 格式贴图的 UI 材质（主要用于 Android）	在使用 ETC1 压缩纹理时提供透明通道支持（Alpha 拆分）

Events

事件名	调用时机	描述	常见用途
`preWillRenderCanvases`	Canvas 渲染前，最先调用	在 Canvas 渲染流程开始前立即触发（早于布局和绘制）	在渲染前动态调整 UI 布局、刷新数据
`willRenderCanvases`	Canvas 渲染前，紧接上一步	在 Canvas 渲染流程开始前触发，但晚于 `preWillRenderCanvases`	绑定动画播放、状态更新逻辑、依赖布局结果的修改操作

事件区别和调用顺序

Canvas.preWillRederCanvases -> Canvas.willRenderCanvases -> Canvas 渲染

preWilldRenderCanvases：在所有布局系统更新之前调用，用于准备UI状态、尺寸、数据等
willRenderCanvases：在布局完成后、渲染开始前调用，适合根据最终布局做动画、视觉状态处理

UnityScripting Canvas

UI Component

通用组件

UICommonComponent

Rect Transform

RectTransform继承自Transform，专门用于2D UI布局。
所有UI元素都依赖RectTransform来定位和缩放

核心属性

属性名	类型	说明
`anchorMin`	Vector2	锚点区域左下角（归一化坐标，0~1）
`anchorMax`	Vector2	锚点区域右上角
`anchoredPosition`	Vector2	相对于锚点区域中心的偏移量
`pivot`	Vector2	本地坐标的参考中心（范围 0~1）
`sizeDelta`	Vector2	元素宽高，或拉伸模式下的偏移
`rect`	Rect (只读)	实际的矩形框（位置、宽高）
`localPosition`	Vector3	相对于父节点的本地坐标（不推荐直接用于 UI）

Anchor

Anchor（锚点）是RectTransform的关键组成部分，决定了UI元素相对于父物体的位置和尺寸的参考点

Anchor实际上是一对二维坐标：anchorMin和anchorMax，每个值都是[0, 1]范围内归一化坐标，表示在父元素矩形中的相对位置

anchorMin = (0, 0)表示父物体的左下角
anchorMax = (1, 1)表示父物体的右上角

锚点的几种模式 1.固定位置（不拉伸）
当：anchorMin = anchorMax

元素位置相对于这个锚点点位
用anchoredPosition来控制偏移
常用于角落按钮、图标等

2.拉伸尺寸（适应父物体）当：anchorMin != anchorMax

元素会随着父容器的尺寸变化而拉伸
sizeDelta不是绝对宽高，而是拉伸结果的偏移

Pivot

pivot（枢轴点）定义的是UI元素自身的参考点（中心点），它决定了：

元素的位置是以自身哪个位置为参考（锚点对齐）
元素在旋转时围绕哪里旋转
元素在缩放时以哪个点为中心缩放

它的值是一个二维向量，范围在[0, 1]之间，表示相对于自身矩形的位置：

`pivot` 值	位置说明
(0, 0)	左下角
(0.5, 0.5)	中心（默认）
(1, 1)	右上角
(0, 1)	左上角
(1, 0)	右下角

布局

布局演示 假设Canvas是1920*1080的全屏UI

RectTransform rt = GetComponent<RectTransform>();

rt.anchorMin = new Vector2(0.5f, 0.5f);
rt.anchorMax = new Vector2(0.5f, 0.5f);
rt.pivot = new Vector2(0.5f, 0.5f);
rt.anchoredPosition = new Vector2(0, 0);
rt.sizeDelta = new Vector2(200, 100);

这个UI元素将被放置在屏幕正中央，宽度为200，高度为100

坐标系层级关系

1.anchorMin / anchorMax决定锚点区域

2.anchoredPosition是相对于锚点区域的中心

3.pivot是UI元素自身的中心点

4.最终位置由这些共同计算得到

实际计算公式（简化版）

最终位置 = 锚点区域中心 + anchoredPosition - pivot * sizeDelta

这个公式说明了设置的位置不是直接坐标，而是围绕锚点和pivot共同计算的结果

AnchorPreSets

按住Alt + Shift拖动可以同时设置pivot和anchor
Unity提供Anchor Preset快速布局
蓝线表示Anchors，红点表示Pivot，灰框表示实际UI区域

RectTransform API

Properties

属性	描述
`anchoredPosition`	相对于锚点参考位置的二维坐标，表示此 `RectTransform` 的pivot（枢轴点）的位置。
`anchoredPosition3D`	相对于锚点参考位置的三维坐标，主要用于支持 Z 轴（例如 3D UI 或特殊布局需求）。
`anchorMax`	右上角锚点在父 `RectTransform` 中的归一化坐标（范围 0~1），例如 (1,1) 表示父物体的右上角。
`anchorMin`	左下角锚点在父 `RectTransform` 中的归一化坐标，例如 (0,0) 表示父物体的左下角。
`drivenByObject`	如果该 `RectTransform` 的属性被其他对象驱动（如 Layout 组件），会显示驱动它的对象；否则为 `null`。常用于调试自动布局。
`offsetMax`	当前矩形右上角相对于右上锚点的偏移值（本地坐标）。可以理解为 `Top` 和 `Right` 的偏移。
`offsetMin`	当前矩形左下角相对于左下锚点的偏移值。可以理解为 `Left` 和 `Bottom` 的偏移。
`pivot`	当前 `RectTransform` 的枢轴点，用归一化坐标表示 (0~1)，如 (0.5, 0.5) 表示中心点，(0, 0) 表示左下角。
`rect`	在本地坐标系下计算出的实际矩形区域，是一个 `Rect` 结构体（包含 x, y, width, height）。只读属性。
`sizeDelta`	表示当前矩形的宽高相对于 anchor 之间距离的增量值。如果 anchorMin 和 anchorMax 相同，则这个值就是最终尺寸。

Public Method

方法	描述
`ForceUpdateRectTransforms()`	强制重新计算 `RectTransform` 的内部数据（通常在布局改变后使用，用来立即更新布局）。
`GetLocalCorners(Vector3[] fourCornersArray)`	获取该 `RectTransform` 在本地空间中的四个角的坐标，按顺序为：左下、左上、右上、右下。结果会填充到传入的 `Vector3[4]` 数组中。
`GetWorldCorners(Vector3[] fourCornersArray)`	获取该 `RectTransform` 在世界空间中的四个角的坐标（顺序同上）。
`SetInsetAndSizeFromParentEdge(RectTransform.Edge edge, float inset, float size)`	以父物体的某条边为参考，设置当前 `RectTransform` 距离该边的偏移值（inset）和自身的尺寸（size）。适用于锚点固定在某一边的场景。
`SetSizeWithCurrentAnchors(RectTransform.Axis axis, float size)`	在指定轴（水平或垂直）上，按照当前锚点设置矩形大小。它会考虑锚点之间的拉伸距离，相对于锚点调整 sizeDelta。

Event

事件	描述
`reapplyDrivenProperties`	当一个 `RectTransform` 的某些属性（由外部系统如 Layout、Animation 或代码控制）需要被重新应用时触发的事件。开发者可以订阅这个事件来自定义处理逻辑。

Delegate

委托	描述
`ReapplyDrivenProperties`	用于 `RectTransform.reapplyDrivenProperties` 事件的委托类型，定义了事件回调的签名。

UnityScripting RectTransform

Canvas Renderer

CanvasRenderer是Unity UI系统中挂在每个可见UI上的一个底层组件，负责UI的绘制提交，它是Graphic类的渲染后台

CanvasRenderer是连接UI元素和底层渲染管线的桥梁

CanvasRenderer的作用

功能方向	说明
渲染控制	负责把 UI 元素的顶点数据、颜色、材质提交给 Canvas 系统渲染
可见性控制	控制是否显示（通过 `cull`, `SetAlpha`, `SetColor` 等）
材质支持	支持单个或多个材质绘制（比如 `SetMaterial`, `SetPopMaterial`）
顶点缓存	维护每个 UI 元素的 Mesh 数据
Mask 支持	与 UI Mask 系统配合使用进行遮罩裁剪处理

CanvasRenderer和UI的绘制流程

UI组件（Image/Text 等）
    ↓
生成顶点、UV、颜色等数据
    ↓
传给 CanvasRenderer
    ↓
CanvasRenderer 将数据提交给 Canvas 系统
    ↓
Canvas 系统统一批处理渲染

CanvasRenderer API

Properties

属性	类型	含义	用途/说明
`absoluteDepth`	`int`	相对于根 Canvas 的深度值	用于判断当前 UI 元素在整个 UI 渲染中的层级。数值越大，越“靠上”渲染。
`relativeDepth`	`int`	相对于父 Canvas 的深度值	可用于局部 Canvas 中排序。配合 `absoluteDepth` 理解 UI 层级渲染顺序。
`materialCount`	`int`	当前可用于渲染的材质数量	用于分配和管理 UI 材质。你可以通过 `SetMaterial()` 为每个 index 设置材质。
`popMaterialCount`	`int`	内部用于 Mask（遮罩）的材质数量	这个通常配合 UI Masking 使用（如 `Image.maskable = true`）。设置 `PopMaterial` 用于控制遮罩剥离行为。
`hasPopInstruction`	`bool`	是否启用了 “渲染堆栈 pop draw call”	和 `PopMaterial` 有关。你可以开启它来显式控制何时 pop 遮罩渲染状态。
`hasMoved`	`bool`	如果 UI 位置发生变更，则为 `true`	用于判断当前帧是否需要重新生成 UI 顶点几何。优化 UI 刷新频率用。
`cull`	`bool`	是否剔除当前元素	设置为 `true` 时，这个元素不再渲染（即使它可见）。用于节省性能。
`cullTransparentMesh`	`bool`	如果顶点颜色 alpha 接近 0，是否剔除渲染	用于透明 UI 元素的剔除优化。默认为 `true`，避免无意义绘制。
`hasRectClipping`	`bool`	是否启用了矩形剪裁区域	是否启用了 `EnableRectClipping(Rect)`。常用于 `ScrollRect` 中的裁剪效果。
`clippingSoftness`	`Vector2`	设置裁剪的“软边缘”范围	使裁剪边缘变得平滑渐变，不是硬切。单位像素值，适合美术优化。

Public Method

方法	中文解释	常见用途
`Clear()`	清除所有缓存的顶点数据	自定义 UI 元素重绘前清空数据
`DisableRectClipping()`	关闭矩形裁剪区域	让 UI 元素可以渲染到全屏（常见于浮动 UI）
`EnableRectClipping(Rect rect)`	启用矩形裁剪区域，只显示 `rect` 内内容	用于 `ScrollRect` 滚动列表裁剪或自定义遮罩逻辑
`GetAlpha()`	获取当前的透明度值	判断当前透明度状态，常用于动画/过渡控制
`GetColor()`	获取当前设置的颜色	一般配合 `SetColor` 使用，读取当前 UI 颜色
`GetInheritedAlpha()`	获取包括所有父级 CanvasGroup 的总 alpha 值	透明度层级继承计算，适合判断是否实际可见
`GetMaterial(int index)`	获取某个索引的材质	适合高级渲染管理，如多 Pass 材质
`GetPopMaterial(int index)`	获取 Pop 材质（用于 UI 遮罩的反向操作）	用于 UI Mask / Stencil Buffer 中的剪裁恢复逻辑
`GetMesh()`	获取当前用于渲染的 Mesh	常用于自定义绘制调试和顶点处理
`GetSecondaryTexture(int index)`	获取指定索引的第二纹理	用于多纹理 UI Shader，例如溶解图、遮罩图
`GetSecondaryTextureCount()`	获取当前可用第二纹理数量	用于管理复杂 Shader UI 结构
`GetSecondaryTextureName(int index)`	获取指定索引的 Shader 属性名	获取传入的纹理对应的 `_SomeTexName`
`SetAlpha(float alpha)`	设置透明度，会与 `UIVertex alpha` 和 `Canvas alpha` 相乘	快速设置 UI 淡入淡出、不透明状态等
`SetAlphaTexture(Texture tex)`	将 `_AlphaTex` 指定为某个纹理，传给 Shader	适用于字体抗锯齿、自定义透明纹理渲染
`SetColor(Color color)`	设置颜色，会与 `UIVertex.color` 和 `Canvas.color` 混合	比如红色血条：`SetColor(Color.red)`
`SetMaterial(Material mat, int index)`	为指定索引设置材质	UI Shader 控制，如多 pass 渲染、特效图层等
`SetPopMaterial(Material mat, int index)`	设置 Pop 材质（内部用于 Mask 反剪裁）	控制遮罩关闭后的恢复材质
`SetMesh(Mesh mesh)`	设置渲染用的 Mesh，Mesh 必须启用读写	你可以自定义顶点图形绘制复杂 UI
`SetSecondaryTextureCount(int count)`	设置可用第二纹理数量	Shader 中有多个纹理输入时要提前设置
`SetSecondaryTexture(int index, string shaderProp, Texture tex)`	设置指定索引的纹理及其 Shader 属性名	给 UI Shader 传多个纹理，如 `_MaskTex`, `_NoiseTex`
`SetTexture(Texture tex)`	设置用于 UI 材质中的主纹理	相当于设定 Shader 的 `_MainTex`，适用于 `Image` 或 `RawImage` 渲染

Static Method

方法名	作用	常见用途
`SplitUIVertexStreams`	将 `UIVertex` 列表拆分成各个属性数组（位置、颜色、UV、法线、切线）	修改顶点颜色、UV、法线等时使用
`AddUIVertexStream`	将 `UIVertex` 中的数据添加到现有的顶点属性列表	组合多个顶点来源数据，叠加处理
`CreateUIVertexStream`	将单独的顶点属性数组（位置、颜色、UV等）合成为一个 `UIVertex` 流	自定义 UI 图形顶点数据，如渐变、闪光、圆形 UI 等

静态方法参数说明

参数名	类型	含义
`verts`	`List<UIVertex>`	完整顶点数据流
`positions`	`List<Vector3>`	每个顶点的位置
`colors`	`List<Color32>`	每个顶点的颜色
`uv0S` / `uv1S`	`List<Vector4>`	UV 坐标（第0、1通道）
`normals`	`List<Vector3>`	法线
`tangents`	`List<Vector4>`	切线，用于光照方向等
`stream`	`List<UIVertex>`	用于最终生成的合并数据

Event

事件名	作用	使用场景
`onRequestRebuild`	（仅在 Editor 模式下）当 CanvasRenderer 中的数据无效、需要重建时触发	编辑器下自定义 UI 编辑、自动刷新组件、响应布局更新等

CanvasRenderer

Image

Image用于在Canvas上渲染2D图像

属性

属性	说明
Source Image	要显示的图片（Sprite）
Color	渲染颜色，会乘上图片原色，可用于变色、淡入淡出
Material	自定义渲染材质（通常用于特殊效果，如描边、渐变）
Raycast Target	是否响应点击事件（勾选表示能被 `GraphicRaycaster` 检测）
Maskable	是否允许被遮罩裁剪（勾选表示允许）

Image Type

类型	描述	用途示例
Simple	直接绘制整张图片	图标、贴图、UI背景
Sliced	使用 9 宫格方式拉伸	按钮、对话框、面板背景
Tiled	将图像平铺（不拉伸）填满区域	网格背景、重复纹理
Filled	根据百分比填充图像	血条、技能冷却、进度圈

Image Type: Simple

Use Sprite Mesh 是否使用Sprite导入时生成的精细网格来渲染这张图片
- 勾选：使用Sprite的自定义网格（Polygon Mesh）
- 取消：使用默认的矩形网格（Quad）
Preserve Aspect 图片在拉伸时是否保持原始宽高比

Image Type: Sliced

Fill Center 是否绘制九宫格中间的中心区域（中心填充）
- 勾选：中间区域会被绘制，整个九宫格都会显示
- 取消：中间区域不会绘制，只绘制九宫格的四个边和四个角，这样中心部分会变透明，常用于制作空心边框、框线效果
Pixels Per Unit Multiplier 像素与Unity单位之间的转换比例，以调整图片显示的大小，从而不必修改RectTransform大小

Image Type: Tiled

同上

Image Type: Filled

属性	含义
Fill Method	填充方式（Horizontal、Vertical、Radial360、Radial180 等）
Fill Origin	填充起点（左/右/上/下/中心）
Fill Amount	填充比例（0 到 1）
Clockwise	是否顺时针填充

性能建议

建议	说明
尽量合批	使用相同材质和图片可减少 draw call
禁用 `Raycast Target`	如果不需要点击事件，记得取消勾选提高效率
使用 `Sliced`	比 `Simple` 更适合可拉伸的 UI 元素，避免失真
用 `Mask` 做裁剪	可配合小地图/头像/UI 视窗裁剪区域

Image API

Static Properties

属性	描述
`ussClassName`	该类型元素默认的 USS（Unity Style Sheets）类名。用于样式表（USS 文件）中选择和定义该类型元素的默认样式。

Properties

属性名	描述
`image`	要显示的贴图（`Texture` 或 `Texture2D`）。设置后，`Image` 会使用此纹理渲染，控件大小可能自动适应纹理尺寸。
`scaleMode`	图片的缩放模式，使用 `ScaleMode` 枚举值（如 `StretchToFill`, `ScaleAndCrop`, `ScaleToFit`）控制图片如何适应控件大小。
`sourceRect`	指定贴图中哪一部分作为源区域显示，使用左上角为参考点的坐标和尺寸（单位为像素）。
`sprite`	显示的精灵（`Sprite` 类型）。这是 UI Toolkit 中推荐的图像显示方式，比原始 `Texture` 更灵活。
`tintColor`	渲染图片时使用的着色颜色（默认为白色，设置为其他颜色可以改变图片颜色）。
`uv`	图片的 UV 坐标范围，基于左下角为原点（通常用于手动设置 UV 区域，控制显示纹理的哪一部分）。
`vectorImage`	用于显示的矢量图（`VectorImage` 类型，SVG 样式的图像）。适合需要分辨率无损缩放的图标或 UI 图案。

UnityScrpting Image

UI Element

Panel

Panel是用来组织、分组、控制一组UI元素的容器，是UI架构中最基本的结构单位

本质上是一个普通的GameObject

Panel = GameObject + RectTransform + Other Optional Component

常见用途

用途	说明
UI 分组容器	将一组相关的 UI 元素包在一起（如背包、商店、设置等）
背景视觉层	给 UI 添加一个背景板（通常使用半透明黑色）
控制显示/隐藏	通过 `SetActive()` 控制整组 UI 显示与否
蒙版裁剪	配合 `Mask` 或 `RectMask2D` 使用，裁剪子内容
动画过渡	面板之间切换时做位移、渐变等 UI 动画
局部布局控制	配合 `LayoutGroup` 使用，控制子元素的自动排列

Image

Image = RectTransform + Image
组件Image不能脱离RectTransform和CanvasRenderer
Image组件见上

Raw Image

Raw Image = RectTransform + Canvas Renderer + Raw Image

RawImagePanel

Raw Image是Unity UI中用于直接显示Texture的组件，区别于Image显示Sprite，RawImage更灵活，适合直接显示非Sprite类型的纹理

RawImage继承自MaskableGraphic，是一个UI可视化组件
它直接使用一个Texture对象进行绘制，而不需要把纹理先转换成Sprite
适合展示视频帧、RenderTexture、摄像头画面或自定义生成的纹理

Image vs RawImage

方面	RawImage	Image
显示资源类型	`Texture`	`Sprite`
是否支持 9 切片	不支持	支持
适合用途	视频播放、动态纹理显示、非 Sprite 纹理	UI 图标、按钮、九宫格背景
是否自动处理边缘	不支持	支持切片自动拉伸

Text(Legacy)

UGUI中最早期的文本显示方式之一，Legacy代表它已经被新的系统所取代，但它依然存在于Unity中，作为一种兼容性方案

TextPanel

Text是Unity UGUI系统（UnityEngine.UI.Text）中的标准UI组件，用来在Canvas上显示简单的2D文本

基本属性

属性名	说明
Text	要显示的字符串
Font	使用的字体（`.ttf`）资源
Font Style	字体样式（Normal / Bold / Italic）
Font Size	字号大小（整数）
Line Spacing	行间距倍数
Rich Text	是否启用 `<b>`,`<i>` 等富文本语法
Alignment	对齐方式（左中右 / 上中下）
Align By Geometry	按几何对齐
Horizontal Overflow	超出边框时的处理方式（Wrap（换行）/Overflow（溢出）
Vertical Overflow	同上，垂直方向 (Truncate/Overflow)
Best Fit	是否自动缩放字体以适应文本框大小
Color	文本颜色
Material	可替换字体材质（如实现描边/阴影）
Raycast Target	是否参与事件响应（一般设为 false 提升性能）
Raycast Padding	用于扩大或缩小UI元素对射线检测（点击、触摸等交互）的响应区域
Maskable	可被遮罩剔除

工作流程

Text(Legacy)的渲染流程大致如下：

将文本用指定字体转换为字符图形
用字体的字符图集（Font Atlas）作为纹理采样源
把这些字母绘制为UI顶点
通过Canvas Renderer渲染出来

Text(Legacy)的缺点

问题	说明
清晰度差	字体在不同分辨率下可能模糊（Bitmap-based）
无动态字形支持	不支持多语言自动扩展字体图集
没有高级排版功能	不支持富排版、嵌入图标、文本裁剪等高级功能
不支持富样式	难以实现多颜色、高级描边、背景等需求
性能低	每次修改文本都会重新生成 UI 顶点，占 GC 和 CPU

性能提升

使用高质量.tff字体（防止边缘锯齿）
打开Best Fit或设置合理的Font Size
配合Shadow/Outline效果增强可读性
避免频繁更新文本，防止GC

Text(Legacy) API

Properties

属性名	类型	说明
alignByGeometry	bool	是否根据字形几何范围对齐，而非字形度量（更精确的水平对齐）。
alignment	TextAnchor	文本相对于 RectTransform 的对齐方式（左中右，上中下等）。
cachedTextGenerator	TextGenerator	缓存的文本生成器，用于渲染当前可见文本。
cachedTextGeneratorForLayout	TextGenerator	缓存的文本生成器，用于布局计算。
flexibleHeight	float	布局系统调用，表示布局弹性高度。
flexibleWidth	float	布局系统调用，表示布局弹性宽度。
font	Font	使用的字体资源。
fontSize	int	字体渲染大小（像素）。
fontStyle	FontStyle	字体样式，如正常、斜体、粗体等。
horizontalOverflow	HorizontalWrapMode	水平溢出模式（Wrap 或 Overflow），控制文本是否换行。
layoutPriority	int	布局系统调用，布局优先级。
lineSpacing	float	行间距，相对于字体行高的比例，1为正常。
mainTexture	Texture	字体纹理，用于渲染字体。
minHeight	float	布局系统调用，最小高度。
minWidth	float	布局系统调用，最小宽度。
pixelsPerUnit	float (只读)	字体缩放的像素单位，描述字体渲染的像素密度。
preferredHeight	float	由文本生成器计算的理想高度。
preferredWidth	float	由文本生成器计算的理想宽度。
resizeTextForBestFit	bool	是否允许文本自动调整大小以适应容器。
resizeTextMaxSize	int	自动调整时允许的最大字体大小。
resizeTextMinSize	int	自动调整时允许的最小字体大小。
supportRichText	bool	是否支持富文本格式（例如 `<b>`, `<i>`, `<color>` 标签）。
text	string	当前显示的文本内容。
verticalOverflow	VerticalWrapMode	垂直溢出模式，控制文本超出垂直边界时的处理方式（裁剪或溢出）。

Public Method

方法名	说明
CalculateLayoutInputHorizontal	由布局系统调用，用于计算水平布局输入（如宽度需求）。
CalculateLayoutInputVertical	由布局系统调用，用于计算垂直布局输入（如高度需求）。
FontTextureChanged	由 `FontUpdateTracker` 调用，当字体纹理更新时触发的回调。
GetGenerationSettings	便捷函数，用于生成并填充文本生成器（TextGenerator）的设置参数。

Protected Method

OnDisable

Static Method

GetTextAnchorPivot 提供一个便捷方法计算锚点向量偏移量

UnityScrpting Text(2019.1)

Button(Legacy)

Unity早期标准控件（UnityEngine.UI.Button）

Button(Legacy) = `Rect Transform` + `Canvas Renderer` + `Image` + `Button`
  |__ Text(Legacy)

ButtonCantAddTextComponent

Button组件只能绑定一个Graphic来做交互反馈，比如颜色变化、高亮、禁用状态
这个Graphic是通过Button.targetGraphic这个字段指定的，通常是绑定在同一个GameObject上的Image或RawImage
Unity的默认交互逻辑只能作用于一个

Panel Properties

Interactable bool 是否允许按钮响应点击，取消勾选按钮将进入禁用状态（由Transition决定视觉反馈）
Transition（状态切换方式）决定按钮在不同状态下的视觉反馈
可选项：
- None 没有任何状态变化
- Color Tint（默认）
  - 改变targetGraphic的颜色
  - 会出现以下设置：
    - Target Graphic：颜色变化作用的目标
    - Normal Color：正常状态
    - Highlighted Color：鼠标悬停
    - Press Color：点击中
    - Selected Color：被选中状态（用于导航）
    - Disabled Color：禁用状态
    - Color Multiplier：颜色强度乘数，最终颜色 = 原始颜色 * Color Multiplier
    - Fade Duration：颜色渐变持续时间（秒）
- Sprite Swap
  - 会切换不同的图片
  - 会出现以下设置：
    - Target Graphic
    - Highlighted Sprite
    - Pressed Sprite
    - Disabled Sprite
- Animation
  - 触发Animator控制器中的动画状态
  - 要求你设置一个带有动画状态机的Animator Controller
  - 字段：
    - Normal Trigger
    - Highlighted Trigger
    - Pressed Trigger
    - Disabled Trigger
  - 配合Animator参数使用
Target Graphic
- 设置受Transition控制的Graphic组件
- 通常是按钮本体上的Image
Navigation
- 控制键盘或手柄方向键操作时，焦点如何移动
- 有四种模式：
  - None：不使用导航
  - Horizontal / Vertical：自动查找上下左右按钮
  - Explicit：手动指定上下左右的按钮
OnClick()事件
- 设置点击按钮时调用的函数
- 类型：UnityEvent（可以托脚本组件 + 指定公开方法）
- 多个函数可以同时绑定，按顺序依次调用

Button的继承结构

UIBehaviour
|___ Selectable
          |___Button

Selectable提供了核心交互逻辑：

状态切换
导航
是否可交互等逻辑

Button在此基础上扩展了：

onClick事件触发机制
响应鼠标点击和键盘操作

Button的点击事件流程（底层）

1.场景中有EventSystem + GraphicRaycaster 2.鼠标点击UI Canvas上的对象 3.GraphicRaycaster计算哪个UI元素被点击 4.被点到的UI触发IPointerClickHandler接口 5.Button继承这个接口，调用.onClick.Invoke()

Button示例

基础绑定 + 点击回调

using UnityEngine;
using UnityEngine.UI;

public class ButtonExample : MonoBehaviour
{
  public Button myButton;

  void Start() => myButton.onClick.AddListener(OnButtonClick);

  void OnButtonClick() => Debug.Log("Click!");
}

动态创建按钮 + 设置点击事件

GameObject buttonObj = new GameObject("MyButton", typeof(RectTransform), typeof(CanvasRenderer), typeof(Image), typeof(Button));

Button btn = buttonObj.GetComponent<Button>();
btn.onClick.AddListener(() => Debug.Log("动态按钮点击"));

控制按钮状态变化

myButton.interactable = false;

myButton.colors = new ColorBlock
{
  normalColor = Color.white, 
  highlightedColor = Color.yellow, 
  pressedColor = Color,red, 
  disabledColor = Color.gray, 
  colorMultiplier = 1f, 
  fadeDuration = 0.1f
};

自定义扩展

可以通过接口实现更复杂的行为

接口	功能
`IPointerEnterHandler`	鼠标进入时触发
`IPointerExitHandler`	鼠标离开时触发
`IPointerClickHandler`	鼠标点击时触发
`ISubmitHandler`	键盘回车时触发（按钮聚焦状态下）

public class MyButtonEx : MonoBehaviour, IPointerEnterHandler
{
  public void OnPointerEnter(PointerEventData eventData) => Debug.Log("鼠标进入按钮");
}

高级交互

原始Button不支持长按、双击、右键等高级操作，可以通过扩展EventTrigger或实现接口自己处理，或自定义实现Button组件

Dropdown(Legacy)

Dropdown = RectTransform + Canvas Renderer + Image + Dropdown
  |___Label // 当前选中项
  |___Arrow // 小箭头实现
  |___Template = RectTransform + Canvas Renderer + Image + Scroll Rect // 下拉菜单模板
        |___Viewport
        |      |___Content
        |             |___Item = RectTransform + Toggle
        |                   |___Item Background
        |                   |___Item Checkmark
        |                   |___Item Label
        |___Scrollbar = RectTransform + Canvas Renderer + Image + Scrollbar
                |___Sliding Area
                           |___Handle

DropdownPanel

属性名	说明
Template	展开后的菜单列表的模板（Template）
Caption Text	当前选项显示的 Label 文本组件
Caption Image	当前选项显示的 Image（可选）
Item Text	下拉项显示用的 Text
Item Image	下拉项使用的图片（可选）
Options	所有的选项，`Dropdown.OptionData` 列表
Value	当前选中项的索引
Alpha Fade Speed	下拉列表打开或关闭时，列表的透明度变化速度
OnValueChanged	回调事件（当选项改变时触发）

Scroll Rect Panel

Dropdown上的Scroll Rect是专用于Dropdown的，区别于通用的Scroll Rect

ScrollRectPanelofDropdown

组件/属性	说明
Content	要滚动的内容（通常是一个RectTransform，里面包含所有需要滚动的元素）
Viewport	可视区域（显示区域），内容超出部分会被裁剪
Horizontal/Vertical	是否开启水平或垂直滚动
Movement Type	滚动行为类型：
- Unrestricted	内容滚动无限制，超出视口可自由移动
- Elastic	弹性滚动，拖拽到边界时会有弹回效果
- Clamped	内容滚动被限制在边界内，无法拖出视口之外
Elasticity	弹性系数，决定弹性滚动的“软硬度”
Inertia	惯性开关，决定拖拽释放后内容是否继续滑动
Deceleration Rate	惯性减速度，惯性滚动速度衰减快慢
Scroll Sensitivity	鼠标滚轮或触控滑动的灵敏度
OnValueChanged	滚动事件

工作原理

Scroll Rect监听用户的拖拽操作，根据拖动距离改变Content的位置
超出Viewport的区域的内容会被裁剪
支持惯性滚动，让滚动更自然流畅
可以通过代码控制滚动位置、滚动监听事件等

Viewport

Viewport是一个RectTransform，它定义了下拉列表展开时可视的区域大小和位置
Viewport通常带有一个Mask组件（或RectMask2D），用来裁剪内容，确保超出范围的内容不显示
Viewport下挂载Content，Content里会动态生成每个选项（Item）
Content是一个垂直排列的容器（通常有Vertical Layout Group和 Content Size Fitter），它控制所有选项的排列和尺寸

示例

创建一个Dropdown并监听选择变化

using UnityEngine;
using UnityEngine.UI;

public class DropdownExample : MonoBehaviour
{
  public Dropdown myDropdown;

  void Start()
  {
    myDropdown.onValueChanged.AddListener(OnDropdownValueChanged);

    myDropdown.options.Clear();
    myDropdown.options.Add(new Dropdown.OptionData("选项 A"));
    myDropdown.options.Add(new Dropdown.OptionData("选项 B"));
    myDropdown.options.Add(new Dropdown.OptionData("选项 C"));

    myDropdown.value = 0;
  }

  void OnDropdownValueChanged(int index)
  {
    Debug.Log("当前选择索引：" + index);
    Dubug.Log("当前选择内容：" + myDropdown.options[index].text);
  }
}

扩展

用法	说明
动态加载选项	用代码控制 options 数据源，比如从配置文件读取
多级联动	比如：国家 -> 城市，选择国家后动态更新城市列表
自定义表现	替换 Item 的 Toggle 结构，实现自定义布局或图标

API

Properties

名称	类型	说明
`options`	`List<Dropdown.OptionData>`	Dropdown 的所有选项列表
`value`	`int`	当前选中选项的索引（从 0 开始）
`captionText`	`Text`	用于显示当前选择文本的 UI Text 组件
`captionImage`	`Image`	显示当前选择图片的 Image 组件（可选）
`itemText`	`Text`	Dropdown 选项模板中 Item 的文本组件
`itemImage`	`Image`	Dropdown 选项模板中 Item 的图片组件
`template`	`RectTransform`	Dropdown 选项列表模板（包含 Viewport 等）

Event

名称	类型	说明
`onValueChanged`	`Dropdown.DropdownEvent`	选中项改变时触发，带选中索引

Method

名称	签名	说明
`ClearOptions()`	`void ClearOptions()`	清空所有选项
`AddOptions(List<string>)`	`void AddOptions(List<string> options)`	添加字符串选项列表
`AddOptions(List<Sprite>)`	`void AddOptions(List<Sprite> options)`	添加图片选项列表
`AddOptions(List<Dropdown.OptionData>)`	`void AddOptions(List<Dropdown.OptionData> options)`	添加 OptionData 列表
`RefreshShownValue()`	`void RefreshShownValue()`	刷新当前显示的选项文本和图片
`Show()`	`void Show()`	展开下拉列表
`Hide()`	`void Hide()`	关闭下拉列表

Input Field(Legacy)

Input Field是Unity中用于接收用户输入的UI组件，主要用于文本输入（如用户名，密码，聊天框等）

InputField
|—— Palceholder(Text或TMP_Text)
|__ Text

InputField：主控件，管理交互逻辑
Placeholder：提示文字，内容为空时显示
Text：用户输入文本

Input Field Panel

InputFieldPanel

属性	描述
`Text Component`	用户输入文字组件
`text`	当前输入的字符串
`placeholder`	占位文字组件（Text 或 TMP_Text）
`characterLimit`	输入字符数限制
`contentType`	内容类型（如密码、整数、电子邮件等）
`lineType`	单行或多行
`inputType`	是否隐藏输入字符（如密码）
`keyboardType`	移动端的虚拟键盘类型
`readOnly`	是否只读
`caretBlinkRate`	光标闪烁速度
`Custom Caret Color`	自定义光标颜色
`Hide Mobile Input`	隐藏移动设备键盘上方的原生输入框
`selectionColor`	选中文本的背景色
`should Activate OnSelect`	当InputField被选中时，是否自动激活并弹出键盘
`On Value Changed`	当用户每次修改输入内容时调用（每个字符变动都会触发）
`On Submit`	当用户提交输入时触发即按下回车键时
`On End Edit`	当输入框失去焦点或用户按下回车键时触发

API

Properties

属性名	类型	说明
`text`	`string`	当前输入框中的文本内容
`textComponent`	`Text`	用于显示文本的 UI 组件
`placeholder`	`Graphic`	占位符（提示文本）组件
`characterLimit`	`int`	最大输入字符数，0 表示不限制
`contentType`	`ContentType`	输入内容类型（标准、密码、数字等）
`inputType`	`InputType`	输入显示方式（标准、密码隐藏等）
`keyboardType`	`TouchScreenKeyboardType`	移动端软键盘类型
`characterValidation`	`CharacterValidation`	字符校验规则
`multiLine`	`bool`	是否支持多行输入
`lineType`	`LineType`	输入框的换行方式
`readOnly`	`bool`	是否只读
`onValidateInput`	`Func<string, int, char>`	自定义输入字符验证回调
`caretPosition`	`int`	当前光标位置
`caretWidth`	`int`	光标宽度（像素）
`caretBlinkRate`	`float`	光标闪烁速度（次数/秒）
`caretColor`	`Color`	光标颜色
`customCaretColor`	`bool`	是否使用自定义光标颜色
`selectionColor`	`Color`	文本选中时的背景色
`selectionAnchorPosition`	`int`	选中起点
`selectionFocusPosition`	`int`	选中终点
`shouldHideMobileInput`	`bool`	是否隐藏移动端原生输入框
`touchScreenKeyboard`	`TouchScreenKeyboard`	当前软键盘实例
`isFocused`	`bool`	输入框当前是否获得焦点
`wasCanceled`	`bool`	输入是否被取消（如按返回键）
`onValueChanged`	`UnityEvent<string>`	输入内容改变时触发
`onEndEdit`	`UnityEvent<string>`	输入结束时触发（失焦或按回车）
`asteriskChar`	`char`	密码输入时显示的字符（默认是 `*`）

Public Methods

方法名	说明
`ActivateInputField()`	激活输入框，开始处理输入事件（获得焦点，弹出软键盘）
`DeactivateInputField()`	取消激活输入框，停止处理事件；如果输入未取消，会发送提交事件
`ForceLabelUpdate()`	强制立即刷新文本显示（重新计算光标位置和可见文本）
`GraphicUpdateComplete()`	（接口方法）通知画布图形更新完成
`LayoutComplete()`	（接口方法）通知布局更新完成
`MoveTextEnd()`	将光标移动到文本末尾
`MoveTextStart()`	将光标移动到文本开头
`OnBeginDrag()`	处理开始拖动事件，判断是否监听拖动
`OnDeselect()`	处理失去焦点事件
`OnDrag()`	处理拖动事件
`OnEndDrag()`	处理拖动结束事件，停止监听拖动
`OnPointerClick()`	处理指针点击事件
`OnPointerDown()`	处理指针按下事件
`OnSubmit()`	处理提交事件（通常是按回车或软键盘上的提交键）
`OnUpdateSelected()`	处理选中更新事件（持续输入、光标移动等）
`ProcessEvent()`	内部辅助函数，用于处理输入事件
`Rebuild()`	重建输入框几何体（光标、选中高亮等）
`SetTextWithoutNotify()`	设置输入框文本内容但不触发 `onValueChanged` 事件，常用于程序内部修改文本时避免事件递归触发

Protected Methods

方法名	功能说明
`Append(char c)`	在输入框当前文本末尾追加一个字符。
`ClampPos(ref int pos)`	限制传入的光标或选择位置，保证不超过文本长度范围。
`GetCharacterIndexFromPosition(Vector2 pos)`	根据鼠标/指针位置计算对应文本中的字符索引。
`KeyPressed(Event evt)`	处理键盘事件，根据按键执行对应动作（输入、删除、光标移动等）。
`OnDisable()`	MonoBehaviour 生命周期函数，输入框禁用时调用（做清理等）。
`OnFocus()`	输入框获得焦点时初始化相关属性，准备输入。
`SelectAll()`	选中输入框内所有文本，通常用于快捷键 Ctrl+A 操作。
`SendOnSubmit()`	触发提交事件（相当于用户确认输入，如按回车）。
`UpdateLabel()`	刷新显示的文本内容，更新 UI 视图（光标和选区位置）。
`Validate(string text, int charIndex, char addedChar)`	对输入的字符进行校验（依据 `characterValidation` 设置）。

Delegates

属性名	类型	作用
`onValidateInput`	`InputField.OnValidateInput`	自定义每个输入字符的校验

TextMeshPro(TMP)

TextMeshPro是Unity提供的高级文本渲染系统，相比传统的UI.Text和TextMesh，它提供了：

更清晰的字体渲染（支持SDF技术）
丰富的排版控制（文字间距、行距、边框、阴影等）
更强的富文本支持（颜色、图标、动画）
更高的性能（批量合并、材质复用）

TMP组件类型

组件名称	用途说明
TextMeshPro (3D)	用于3D世界的文本渲染（替代 `TextMesh`）
TextMeshProUGUI (UI)	用于UI Canvas的文本渲染（替代 `UI.Text`）

TMP Importer

TMP Importer是Unity第一次导入TextMeshPro包时自动弹出的一个向导窗口，也可以手动从菜单中打开
它的作用是：

导入TMP的资源（默认字体、材质、示例场景等）
升级旧的UI元素（可选，把现有的Text升级为TextMeshProUGUI）
帮助初始化TMP设置

何时会看到TMP Importer

第一次使用TMP功能时
第一次安装TMP包时
手动打开 Window -> TextMeshPro -> Import TMP Essential Resources

TMP Importer提供的资源内容

内容	说明
Default Font Asset	默认使用的字体（LiberationSans SDF）
Default Material Presets	支持描边、阴影的材质
TMP Settings.asset	全局设置配置
Shaders	TMP 的渲染器使用的 SDF Shader
Examples & Extras（可选）	示例场景、脚本、UI 风格演示等

TMP vs Text(Legacy)

功能/特性	Unity UI.Text	TextMeshPro
清晰度	低	高（SDF）
富文本支持	有限	强大
图文混排	无	有
字体控制	基本	精细
性能（大批量）	低	高
动态字体加载	有	支持

SDF字体 TMP使用SDF来实现高质量的文本缩放和效果（描边、投影）

在导入字体时会生成一个.asset文件（字体图集 + 字形信息）
SDF渲染不依赖分辨率，UI可以任意缩放不失真

Text（TMP）

TMPTextPanel_1 TMPTextPanel_2

基础设置区

Text Input：文字内容输入框（直接修改会改变显示内容）
Enable RTL Editor：启用从右到左语言支持（如阿拉伯语、希伯来语）
Text Style：选择预设的文字样式（一般用不到，除非用Style Sheet）

Main Settings

Font Asset：当前使用的字体资源
Material Preset：当前字体使用的材质（会影响颜色、描边等）
Font Style：B（粗体）、I（斜体）、U（下划线）、S（删除线）、AB（全部大写）、SC（小型大写）
Font Size / Auto Size：字号和是否自动缩放
Vertex Color：文字的顶点色（可用于动态变色）
Spacing Options：控制字符、单词、段落、行的间距
Mapping：水平/垂直映射方式，一般设为Character即可

Extra Settings

Margins：文字四边内边距
Geometry Sorting：渲染顺序（用于粒子、透明叠加等高级场景）
Is Scale Static：是否标记为静态缩放（用于性能优化）
Rich Text：是否允许富文本标签（如）
Raycast Target：是否能被点击或射线检测命中
Maskable：是否允许被 UI Mask 遮罩裁剪
Parse Escape Characters：是否解析转义符 \n、\t
Visible Descender：显示下沉字符（如 g, y）的空间
Sprite Asset：图文混排用的精灵图集
Style Sheet Asset：文字样式预设集合
Kerning：特定字符对之间的间距微调，用于让文本在视觉上更加美观、易读
Extra Padding：给字符添加额外的像素充填区域，以避免某些视觉效果被裁剪或显示不完整

Material Inspector

Shader
Face（主体文字）
- Color：字体本体颜色
- Softness：模糊程度（文字边缘越柔和）
- Dilate：扩张/收缩字体（负值让文字细一点）
Outline（描边）
- Color：描边颜色
- Thickness：描边厚度（默认是0，没有描边）
Underlay（阴影）
Debug Settings（Shader调试）

Toggle

结构

Toggle = Rect Transform + Toggle
|___Background(Image):勾选框的背景
|        |___Checkmark（Image）：√
|___Label(Text)：名称

Toggle Panel

TogglePanel

属性名	类型	说明
`isOn`	`bool`	当前是否勾选，`true` 表示已选中
`onValueChanged`	`UnityEvent<bool>`	状态切换时的回调，传入参数为新的状态
`interactable`	`bool`	是否可以被点击
`graphic`	`Graphic`	勾选图像（Checkmark）
`group`	`ToggleGroup`	所属的 ToggleGroup（用于单选）
`Toggle Transition`	`Toggle Transition`	状态切换时的视觉过渡效果

示例

获取并监听Toggle状态

using UnityEngine;
using UnityEngine.UI;

public class ToggleExample : MonoBehaviour
{
  public Toggle myToggle;

  void Start()
  {
    myToggle.onValueChanged.AddListener(OnToggleChanged);
  }

  void OnToggleChanged(bool isOn) => Debug.Log("当前 Toggle 状态" + isOn);

}

Toggle Group(单选组)

ToggleGroup组件用于实现多个Toggle的单选功能，类似于网页中的radio button

设置方法：
1.创建一个空物体并挂载ToggleGroup
2.将多个Toggle拖入该物体并在Inspector中的Toggle组件上设置Group为这个ToggleGroup
3.每次只能勾选一个Toggle

public ToggleGroup toggleGroup;

void GetSelectedToggle()
{
  Toggle selected = toggleGroup.ActiveToggles().FirstOrDefault();
  if (selected != null) Debug.Log("当前选中项： " + selected.name);
}

API

Properties

属性名	类型	说明
`graphic`	`Graphic`	受状态影响的图像，通常是用于显示勾选标记的 `Checkmark`（`Image` 或其他 `Graphic`）。
`group`	`ToggleGroup`	当前 Toggle 所属于的 ToggleGroup，用于实现“单选”逻辑。
`isOn`	`bool`	当前 Toggle 是否被选中，`true` 表示“开”；也可用于代码设置状态。
`onValueChanged`	`UnityEvent<bool>`	当 Toggle 状态发生改变时触发的事件回调，参数是新的状态（true/false）。
`toggleTransition`	`Toggle.ToggleTransition`	状态切换的视觉过渡方式，枚举类型：`None` 或 `Fade`（淡入淡出）。

Public Methods

方法 / 接口	类型	说明
`GraphicUpdateComplete()`	`ICanvasElement` 接口方法	图形更新完成时被调用（Canvas 渲染流程的一部分）。通常无需手动调用。
`LayoutComplete()`	`ICanvasElement` 接口方法	布局更新完成时调用，确保组件根据布局正确显示。
`Rebuild(CanvasUpdate update)`	`ICanvasElement` 接口方法	当 UI Canvas 需要重建时被调用，用于更新 Toggle 的布局或图形状态。
`OnPointerClick(PointerEventData eventData)`	`IPointerClickHandler` 接口方法	当 Toggle 被鼠标点击或触控点击时触发。会自动切换 `isOn` 状态并触发 `onValueChanged`。
`OnSubmit(BaseEventData eventData)`	`ISubmitHandler` 接口方法	当用户按下“提交键”（如 Enter）时触发（用于键盘/手柄操作 UI）。
`SetIsOnWithoutNotify(bool value)`	自定义方法	设置 Toggle 状态但不触发 `onValueChanged` 回调，适合你在代码中手动切换状态但不希望触发监听器时使用。

Protected Mehtods

方法	说明
`OnDisable`	参照MonoBehaviour.OnDisable

Slider

结构

Slider = Rect Transform + Slider
|___Background(Image)：滑动条颜色（不可变部分）
|___Fill Area：包裹Fill区域
|       |___Fill(image)：实际充填区域，随着值的改变而拉伸/缩放
|___Handle Slide Area：可滑动范围的区域容器
             |___Handle(image)：可拖动的滑块，通常是个图标或者圆点

Slider Panel

SliderPanel

Whole Numbers：是否只允许整数

API

Properties

属性	类型	说明
`direction`	`Slider.Direction`	滑动条的方向，从最小值到最大值的滑动方向。可选： • `LeftToRight` • `RightToLeft` • `BottomToTop` • `TopToBottom`
`fillRect`	`RectTransform`	指定一个 `RectTransform`，作为滑动条的填充区域。滑动值变化时会调整此区域的大小。
`handleRect`	`RectTransform`	指定滑块的 `RectTransform`，用于显示可拖动的手柄。
`maxValue`	`float`	滑动条允许的最大值。
`minValue`	`float`	滑动条允许的最小值。
`value`	`float`	当前的滑动值。可以手动设置，会同步更新滑块位置和填充。
`normalizedValue`	`float` (只读/可设)	当前值归一化后（范围 0 到 1）的表示。设置它可以等价于设置 `value`。
`onValueChanged`	`UnityEvent<float>`	当 `value` 改变时触发的回调事件。可以在 Inspector 中指定函数响应变化。
`wholeNumbers`	`bool`	是否只允许整数值。勾选后即使你滑动到小数位置，也会自动取整。

示例：设置Slider参数

public Slider mySlider;

void Start()
{
  mySlider.minValue = 0;
  mySlider.maxValue = 100;
  mySlider.value = 50;;
  mySlider.wholeNumbers = true;

  mySlider.onValueChanged.AddListener(OnSliderValueChanged);
}

void OnSliderValueChanged(float val) => Debug.Log("当前值" + val);

Public Methods

方法名	来源接口 / 基类	说明
FindSelectableOnDown()	`Selectable`	返回下方的可选 UI 元素（用于键盘/手柄导航）。
FindSelectableOnUp()	`Selectable`	返回上方的可选 UI 元素。
FindSelectableOnLeft()	`Selectable`	返回左侧的可选 UI 元素。
FindSelectableOnRight()	`Selectable`	返回右侧的可选 UI 元素。
GraphicUpdateComplete()	`ICanvasElement`	在 UI 图形重绘完成时调用。
LayoutComplete()	`ICanvasElement`	在 UI 布局更新完成时调用。
Rebuild(CanvasUpdate update)	`ICanvasElement`	当 Canvas 需要重建 UI 时调用（刷新布局和图形）。
OnInitializePotentialDrag(PointerEventData)	`IInitializePotentialDragHandler`	初始化拖拽状态，设置拖拽方向或行为。
OnDrag(PointerEventData)	`IDragHandler`	当用户拖动 Handle 时调用，更新滑动值。
OnMove(AxisEventData)	`IMoveHandler`	当使用键盘或手柄操作滑块时调用（如方向键）。
SetDirection(Direction, bool)	`Slider` 自身	设置滑动方向，并决定是否调整 Fill 和 Handle 的布局。
SetValueWithoutNotify(float)	`Slider` 自身	设置数值但不触发 `onValueChanged` 回调事件。

Protected Methods

方法名	说明
`OnDisable`	参照MonoBehaviour.OnDisable
`Set`	设置Slider的值

Scrollbar

Scrollbar是一个用于滚动控制的UI组件，常与ScrollRect搭配使用，控制列表、文本区域、图片等内容的滚动

结构

Scrollbar = Rect Transform + Canvas Renderer + Image + Scrollbar
|___Sliding Area（滑动轨道范围）
           |___Handle（滑块） = Rect Transform + Canvas Renderer + Image

Scrollbar Panel

ScrollbarPanel

Size：滑块所占比率，值越小，滑块越短，内容和视口的比例的反映，由ScrollRect进行调节
numberOfSteps：可选值个数，如果设置 > 1，滑块将分段跳动

Scrollbar vs Slider

比较项	`Scrollbar`	`Slider`
用途	滚动内容控制	数值选择器
是否可设置 `size`	是	否
与 `ScrollRect` 结合	常用	较少
滑动方式	滚轮、拖拽、点击轨道	拖拽或编程控制

API

Properties

成员	类型	说明
handleRect	`RectTransform`	滑块（Handle）的 RectTransform。
direction	`Scrollbar.Direction`	滑动方向（枚举）。
value	`float`	当前滚动值，范围 [0, 1]。
size	`float`	滑块在轨道中所占比例 [0, 1]。值越小，滑块越短。
numberOfSteps	`int`	分段数量。>1 时启用分段滚动。
onValueChanged	`UnityEvent<float>`	滚动值变化时调用。

Public Methods

方法名	类型 / 接口	说明
FindSelectableOnDown()	`Selectable`（基类）	返回下方可选的 UI 控件（用于键盘/手柄方向导航）。
FindSelectableOnLeft()	`Selectable`（基类）	返回左侧可选的 UI 控件。
FindSelectableOnRight()	`Selectable`（基类）	返回右侧可选的 UI 控件。
FindSelectableOnUp()	`Selectable`（基类）	返回上方可选的 UI 控件。
GraphicUpdateComplete()	`ICanvasElement`	在图形系统更新完成后调用，用于重绘完 UI 后的清理/处理。
LayoutComplete()	`ICanvasElement`	布局系统更新完成时调用，通常用于收尾处理。
OnBeginDrag(PointerEventData)	`IBeginDragHandler`	当开始拖动滑块时触发（鼠标按下并准备拖动）。
OnDrag(PointerEventData)	`IDragHandler`	拖动过程中持续触发，更新 `value`。
OnInitializePotentialDrag(PointerEventData)	`IInitializePotentialDragHandler`	拖拽开始前初始化拖拽设置（如拖拽方向等）。
OnMove(AxisEventData)	`IMoveHandler`	响应键盘/手柄的移动事件（如方向键、左摇杆）。
OnPointerDown(PointerEventData)	`IPointerDownHandler`	当鼠标或触控按下滑条时触发。
OnPointerUp(PointerEventData)	`IPointerUpHandler`	当鼠标或触控释放时触发。
Rebuild(CanvasUpdate)	`ICanvasElement`	在 Canvas 需要重新构建 UI 时调用，如尺寸或内容更新。
SetDirection(Direction, bool)	`Scrollbar` 本身	设置滑动方向，并决定是否重新布置滑块布局。
SetValueWithoutNotify(float)	`Scrollbar` 本身	设置 `value` 但不触发 `onValueChanged` 回调，用于静默初始化。

Protected Methods

方法名	所属	说明
ClickRepeat(PointerEventData)	协程函数（Coroutine）	当按住滑条空白区域（非 Handle）时启动，用于模拟持续点击（滚动），直到释放。通常由 `OnPointerDown` 启动，用于实现“点住滚动”的行为。
OnDisable()	`MonoBehaviour` 生命周期方法	当组件或 GameObject 被禁用时调用。用于清理状态，比如停止滑动协程、取消事件等。

ClickRepeat工作原理

用户点击 Scrollbar 空白区域（非 Handle）
↓
OnPointerDown 被触发
↓
启动协程 ClickRepeat
↓
每隔一段时间不断调整value，模拟“持续按压”
↓
OnPointerUp 或 OnDisable 停止协程

ClickRepeat不会在拖动Handle时触发，仅当点击轨道空白部分时才会执行通常用于快速向上/向下滚动

Scroll View

结构

Scroll View = Rect Transform + Canvas Renderer + Image + Scroll Rect
|___Viewport = Rect Transform + Canvas Renderer + Image + Mask
|       |___Content
|___Scrollbar Horizontal
|       |___Sliding Area
|       |___Handle
|___Scrollbar Vertical
        |___Sliding Area
        |___Handle

Scroll Rect Panel

ScrollRectPanel

属性	说明
Content	滚动的内容区域（Transform）。必须设置。
Horizontal / Vertical	是否允许横向 / 纵向滚动。
Movement Type	滚动行为的类型： • `Unrestricted`（无限滚动） • `Elastic`（弹性回弹） • `Clamped`（限制在边界）
Elasticity	弹性程度，适用于 Elastic 模式。
Inertia	是否使用惯性滚动（拖动停止后缓慢减速）。
Deceleration Rate	惯性减速速率（值越接近 0 减速越快）。
Scroll Sensitivity	鼠标滚轮或拖动的灵敏度。
Viewport	可视窗口（一般是带有 `Mask` 或 `RectMask2D` 的 UI 元素）。
Horizontal/Vertical Scrollbar	滚动条（可选）。
OnValueChanged	滚动时触发的事件（`Vector2`，x 为横向偏移，y 为纵向偏移，范围 0~1）。

使用要点

1.Content必须配合Layout Group使用
常见组合：

Vertical Layout Group + Content Size Fitter (Preferred Height)
或者使用Grid Layout Group实现网格布局

2.可视区域需要加Mask
否则滚动时会“溢出显示”

3.Content的Pivot通常设为(0, 1)
也就是左上角，这样滚动方向更符合视觉直觉（从上往下滚）

API

Properties

内容控制

属性	含义
`content`	被滚动的内容区域，必须是 ScrollRect 的子节点，一般挂 Layout Group 和元素。
`viewport`	可视区域，通常是带有 `Mask` 或 `RectMask2D` 的 RectTransform，用于裁剪 content。

滚动方向控制

属性	含义
`horizontal`	是否启用水平滚动。
`vertical`	是否启用垂直滚动。
`horizontalNormalizedPosition`	当前水平滚动位置，0 = 左侧，1 = 右侧。
`verticalNormalizedPosition`	当前垂直滚动位置，0 = 底部，1 = 顶部。
`normalizedPosition`	一个 `(x, y)` 的向量，表示水平和垂直的标准化位置。

滚动行为与物理效果

属性	含义
`movementType`	滚动边界行为： • `Unrestricted`: 不限制内容滚动出界 • `Clamped`: 限制内容不超出边界 • `Elastic`: 允许超出边界但有弹性回弹
`elasticity`	内容超出边界时的回弹强度（只适用于 `Elastic` 模式）。
`inertia`	是否启用惯性滚动（用户松手后内容继续滑动）。
`decelerationRate`	惯性滚动时的减速率，越小减速越快，0~1。
`velocity`	当前内容的滚动速度（仅运行时可读写）。

滚动灵敏度

属性	含义
`scrollSensitivity`	鼠标滚轮或触摸板的滚动灵敏度，值越大越灵敏。

滚动条相关

属性	含义
`horizontalScrollbar`	水平滚动条组件引用（可选）。
`horizontalScrollbarSpacing`	水平滚动条与 viewport 之间的间距。
`horizontalScrollbarVisibility`	滚动条的显示策略（自动、永久等）。
`verticalScrollbar`	垂直滚动条组件引用（可选）。
`verticalScrollbarSpacing`	垂直滚动条与 viewport 之间的间距。
`verticalScrollbarVisibility`	垂直滚动条的显示策略。

事件

属性	含义
`onValueChanged`	滚动位置变化时的事件回调，参数是 `Vector2(normalizedPosition)`。可以用来联动其他 UI，或动态加载内容等。

与布局系统集成

这些属性主要是用于ScrollRect本身作为UI元素时的布局信息（一般不常改）

属性	含义
`minWidth` / `minHeight`	布局系统要求的最小宽高。
`preferredWidth` / `preferredHeight`	建议的宽高，通常用于自动布局计算。
`flexibleWidth` / `flexibleHeight`	是否可以在布局中灵活伸缩。
`layoutPriority`	控制多布局系统下优先级（数字越高越优先）。

Public Methods

与布局系统有关的方法

这些方法一般由Unity的UI Layout系统自动调用，开发者很少直接使用，了解它们可以帮助搞清楚ScrollRect和布局系统的协作过程

方法	说明
`CalculateLayoutInputHorizontal()`	告诉布局系统如何计算内容的宽度需求。
`CalculateLayoutInputVertical()`	告诉布局系统如何计算内容的高度需求。
`SetLayoutHorizontal()`	设置子元素的水平布局（内部执行，如 Content 的定位）。
`SetLayoutVertical()`	设置子元素的垂直布局。
`LayoutComplete()`	布局系统完成后调用，通常用于布局结束时的清理。
`Rebuild(CanvasUpdate update)`	在不同的 Canvas 更新阶段重建 UI（布局、绘制、交互等）。

拖拽相关方法（响应用户手势）

方法	说明
`OnBeginDrag(PointerEventData eventData)`	当用户开始拖动 ScrollRect 时触发（鼠标或触摸开始拖动）。初始化拖动参数。
`OnDrag(PointerEventData eventData)`	拖动过程中持续触发，主要移动 Content。
`OnEndDrag(PointerEventData eventData)`	拖动结束时触发，决定是否开始惯性滚动。
`OnInitializePotentialDrag(PointerEventData eventData)`	在系统检测到可能要开始拖拽时调用。设置拖拽相关参数，如 `useDragThreshold`。
`StopMovement()`	手动停止滚动（将 `velocity` 设为零），可用于外部中断滚动行为。

鼠标滚轮事件

方法	说明
`OnScroll(PointerEventData eventData)`	响应鼠标滚轮事件，常用于鼠标滑动滚动内容。ScrollRect 内部会根据 `scrollSensitivity` 来改变 `content` 的位置。

Canvas系统更新周期

方法	说明
`GraphicUpdateComplete()`	图形更新阶段完成后调用，通常用于清理绘制状态。
`IsActive()`	ScrollRect 当前是否激活（继承自 `UIBehaviour`），用于判断是否参与渲染和交互。

示例

自定义拖动方向（只允许竖直）

public class VerticalOnlyScrollRect : ScrollRect
{
  public override void OnDrag(PointerEventData eventData)
  {
    if (!vertical) return;

    var delta = new Vector2(0, eventData.delta.y);
    base.OnDrag(new PointerEventData(eventData.eventSystem)
    {
      position = eventData.position,
      delta = delta
    });
  }
}

UI更新

Unity的UI系统在每一帧里，都按照一定顺序对所有UI元素做布局计算、绘制更新、交互处理，这个顺序被划分成了几个阶段

UI更新流程的3个阶段（CanvasUpdate）

Unity会调用实现了ICanvasElement接口的UI组件（如Text，Image，ScrollRect等），按顺序执行：

阶段	意义	常见调用的方法
1.`Layout` 阶段	计算大小、位置	`CalculateLayoutInputHorizontal/Vertical`, `SetLayoutHorizontal/Vertical`
2.`Graphic` 阶段	更新可视内容，比如文字、图片、颜色等	`GraphicUpdateComplete`
3.`LatePreRender` 阶段	最后准备渲染前的调整	比如强制设置滚动位置等

TimeLine(Per Frame)

Update()
↓
Layout阶段：
    - ScrollRect：计算内容区域位置
    - Text：计算文字排版
↓
Graphic阶段：
    - Image：更新贴图
    - Text：更新文字网格
↓
LatePreRender阶段：
    - ScrollRect：修正 normalizedPosition
↓
渲染 → 显示画面

某些UI行为必须等到布局计算完成后才能准确执行，比如：

scrollRect.verticalNormalizedPosition = 0f;

如果放在Start()里，它可能在布局阶段之前就执行了，所以不会生效

正确的方式是：

Canvas.ForceUpdateCanvases(); // 强制执行Layout阶段
scrollRect.verticalNormalizedPosition = 0f;

UI Event System

Effects

UIEffectsPanel

Outline

Outline是UI元素（特别是Text或Image）边缘的描边效果，常用于：

让文字在复杂背景上更清晰
做出“激活态、高亮态、按钮描边”等视觉反馈

可以使用Unity内置组件或者自定义Shader

方法	原理
Unity 内置效果	给文字/图片添加一个 UI 组件 `Outline`，复制顶点并偏移渲染多次
Shader 实现	将 UI 元素边缘偏移若干方向采样贴图，合成边缘

内置Outline的原理：

一个文字变成多个（通常4~8）方向偏移的副本，每个副本绘制为描边颜色
性能相对差一些，特别是在大量UI上使用

Position As UV1

这是一个技术手段：将某个偏移后的顶点坐标值（如描边方向的位移）写入UV1通道，让Shader在片元阶段使用它来做偏移采样

用途：

把需要的特效位移、数据提前写入UV1（节省顶点数据或避免增加新通道）
Shader在Fragment阶段用UV1执行各种偏移采样，如做模糊、描边、阴影

Shadow

Shadow是给UI文本或图形加上的下投影阴影，常用于：

提高层次感
模拟立体感
UI Hover时的强调效果

实现方式和Outline类似，也常用顶点偏移 + 颜色叠加实现；通常只需1此偏移绘制，不像Outline要多个方向

Layout System

详见Layout

Mask

详见Mask

UGUI渲染流程

UGUI的渲染是基于Canvas来驱动和管理的，Canvas是UGUI的核心渲染单元

UGUI组成核心

Canvas：UI的根节点，管理批处理和渲染
RectTransform：UI元素的定位组件
Graphic（Image、Text等）：UI的可绘制元素，负责生成顶点数据
CanvasRenderer：负责将顶点数据提交给GPU绘制

UGUI渲染总体流程

1.UI元素状态改变触发重建（Dirty）

位置、大小、颜色、材质、文本内容等变化，都会标记对应Graphic为Dirty
Dirty的Graphic会触发它所属的Canvas的重建流程

2.Canvas重建

Unity会重新收集所有需要渲染的Graphic，生成顶点缓冲（Vertex Buffer）
会合并材质和纹理相同的Graphic，尽量批处理减少Draw Call

3.Canvas批处理

批处理把相同材质的Graphic合并成一个Draw Call
Unity会更具是否启用Canvas分割（拆分Canvas）、动态批处理、GPU Instancing决定合批方案

4.顶点提交

CanvasRenderer组件负责把生成的顶点数据传给GPU
通过Unity内置的UI Shader渲染UI元素

5.GPU渲染

GPU执行顶点着色、像素着色，最终把UI绘制到屏幕

示意图：

UI元素变化（Dirty） 
        ↓
Canvas重建
        ↓
顶点缓冲区重新生成（OnPopulateMesh）
        ↓
批处理合并（Batching）
        ↓
CanvasRenderer提交顶点
        ↓
GPU渲染绘制

重要细节

Canvas重建代价大
- UI元素变化会触发Canvas重建，代价主要在CPU端的顶点生成和批处理
Canvas的划分影响渲染效率
- 单一大Canvas变动小部分时，整个Canvas都需要重建
- 拆分多个Canvas能减少重建范围，提高性能
使用Mask、ScrollRect会增加Draw Call
- Mask会强制拆分批处理，影响性能
TextMeshPro相比原生Text性能更优
- 生成的顶点少，渲染更高效

UI性能优化

UI性能瓶颈来源

Canvas重绘（Canvas Batching）
- Unity UI的核心瓶颈，任何UI元素的改变都会触发Canvas重绘
- 重绘会导致大量Draw Call和CPU消耗
过多Draw Call
- UI元素数量多，切换材质、纹理时会产生更多Draw Call
过度的布局计算
- Layout Group、ContentSizeFitter频繁更新会触发布局计算，消耗CPU
频繁的UI更新
- 文本、图片频繁更改，尤其是动态更新时

重点优化方向和方法

减少Canvas重绘范围

拆分Canvas
- 把经常变动的UI元素放在单独的Canvas，避免整屏重绘
避免频繁更改UI属性
- 避免频繁修改RectTransform、颜色、图片等触发Canvas重绘的操作
使用Canvas的分区刷新
- Unity在2020+版本有更好的Canvas局部刷新

控制Draw Call数量

使用UI图集（Sprite Atlas）
- 减少纹理切换，批量合并Draw Call
合理使用Image Type
- 对于简单图形使用Simple，避免复杂的Sliced或Tiled导致额外计算
减少Mask数量
- Mask会导致额外Draw Call，尽量复用或用RectMask2D替代

优化布局系统

避免使用过多Layout Group和ContentSizeFitter
- 这两个组件会频繁触发布局刷新，影响性能
尽量在UI静态阶段完成布局计算
- 动态添加、删除时手动刷新布局

文本优化

避免频繁修改Text内容
- 文本更新会重建顶点，代价大
使用TextMeshPro
- 性能更好，支持更灵活的排版和渲染
启用文本的“字体缓存”功能
- 减少文本绘制成本

使用Pool技术复用UI元素

对动态生成的大量UI（如列表、格子），用对象池复用而非反复创建销毁

Unity UI Tookit

Unity UI Tookit是Unity推出的新一代UI框架，用于狗i按Editor UI（编译器工具）以及运行时UI（Runtime UI），逐渐称为UGUI的继任者。
它借鉴了Web的开发理念，使用类似HTML + CSS的语法（UXML + USS），结合C#逻辑代码

UI Toolkit组成

1.UXML（Unity XML）

类似HTML，定义UI结构
示例：

<engine:VisualElement class="container">
  <engine:Label text="Hello UI Toolkit" class="title-label"/>
</engine:VisualElement>

2.USS（Unity Style Sheets）

类似CSS，用于样式设置
示例：

.container {
  flex-direction: column;
  padding: 10px;
}

.title-label {
  font-size: 20px;
  color: white;
}

3.C#脚本

控制逻辑，加载UI，注册事件
示例：

var root = GetComponent<UIDocument>().rootVisualElement;
var button = root.Q<Button>("myButton");
button.clicked += () => Debug.Log("Button clicked");

UI Tookit的优势

优点	描述
数据驱动	更好地支持 MVC/MVVM 等架构。
样式分离	USS 类似 CSS，使样式和逻辑分离，维护性强。
高度自定义	支持自定义控件、继承组件等。
原生支持编辑器工具	创建自定义 Inspector、工具面板更加方便。
性能更好（Runtime UI）	尤其在静态 UI 上比 UGUI 更高效。

UI Tookit vs UGUI

特性	UI Toolkit	UGUI
样式机制	USS（类似 CSS）	内联属性
布局方式	Flexbox	Anchors + RectTransform
可编程性	更接近 Web 构建方式	Unity 特有组件方式
编辑器支持	完善，Inspector、EditorWindow	需要自写代码
动态创建元素	支持（动态加载 UXML）	支持，但较繁琐
性能（静态 UI）	更优	中等
学习曲线	偏陡峭（对 Web 不熟悉的人）	更直观

使用场景

自定义编辑器（如Inspector、EditorWindow）
数据面板、工具插件等
复杂动态UI游戏界面
动画复杂、过渡多的UI

UI动画

Unity中做UI动画，有以下几种常见方式

Unity Animator Controller做UI动画

可以用Animator组件对UI元素做复杂动画，类似角色动画
配合Animation窗口，制作位置、缩放、旋转、颜色、透明度等属性动画
适合状态切换、复杂动画序列，比如按钮按下弹跳、菜单打开过渡等

Tween动画库

比较常用且高效的方式，很多第三方Tween库都支持UI动画：
- DOTween（Dimigiant）
- LeanTween
- iTween

利用UI CanvasGroup做渐隐渐显动画

CanvasGroup组件可以控制整体UI透明度、交互和射线阻挡
搭配Tween库做淡入淡出效果

使用代码插值做自定义动画

使用Update()里的插值控制位置、颜色等
灵活，但代码复杂度高，不推荐做复杂UI动画

UI粒子动画和Shader动画

结合粒子系统、Shader特效提升UI表现
适合特殊需求，比如炫酷按钮发光、粒子飞散等

Timeline与UI动画

Unity Timeline也支持控制UI动画，适合需要同步多动画的场景

UGUI和NGUI

Canvas

Canvas的渲染模式

1.Screen Space - Overlay（屏幕空间覆盖）

2.Screen Space - Camera（屏幕空间摄像机）

3.World Space（世界空间）

Canvas组件的重要属性

Screen Space - Overlay

Screen Space - Camera

World Space

CanvasScaler

三种缩放模式

Graphic Raycaster

工作原理：UI射线检测

Canvas Group

属性

Canvas的层级关系

为什么要用子Canvas

性能优化

UI分区逻辑清晰

父子Canvas的排序 & 显示顺序

排序层控制（Sorting Layer + Order in Layer）

RectTransform父子关系的影响

Canvas性能

Canvas API

Properties

Static Method

Events

事件区别和调用顺序

UI Component

通用组件

Rect Transform

核心属性

Anchor

Pivot

布局

坐标系层级关系

RectTransform API

Canvas Renderer

CanvasRenderer的作用

CanvasRenderer和UI的绘制流程

CanvasRenderer API

Image

属性

Image Type: Simple

Image Type: Sliced

Image Type: Tiled

Image Type: Filled

性能建议

Image API

UI Element

Panel

常见用途

Image

Raw Image

Image vs RawImage

Text(Legacy)

基本属性

工作流程

Text(Legacy)的缺点

性能提升

Text(Legacy) API

Properties

Public Method

Protected Method

Static Method

Button(Legacy)

Panel Properties

Button的继承结构

Button的点击事件流程（底层）

Button示例

基础绑定 + 点击回调

动态创建按钮 + 设置点击事件

控制按钮状态变化

自定义扩展

高级交互

Dropdown(Legacy)

Dropdown Panel

Scroll Rect Panel

工作原理