UGUI

Unity UGUI 高级参考手册

Canvas（画布）
RectTransform（UI 元素）
Text / TextMeshProUGUI
Image / RawImage
Button
Toggle / ToggleGroup
InputField
Slider
Scrollbar / ScrollRect（滚动视图）
Dropdown（下拉列表）
图集与 DrawCall 优化
事件接口与 EventTrigger
组件组合示例
坐标转换与拖拽
Mask 遮罩（Mask）
3D 模型 / 粒子显示在 UI 之前
异形按钮准确点击（Alpha 点击检测）
自动布局（Auto Layout）
Canvas Group（画布组控制）

Canvas（画布）

参数	默认值	说明	使用要点
Render Mode	Screen Space - Overlay	渲染模式	Overlay：覆盖整个屏幕；Camera：绑定摄像机；World：世界空间 UI
Pixel Perfect	false	是否像素对齐	对像素艺术游戏有用
Sort Order	0	排序顺序	高序号覆盖低序号
Camera	null	当 Render Mode 为 Camera 时使用的摄像机	控制 UI 渲染视角
Canvas Scaler - UI Scale Mode	Scale With Screen Size	UI 缩放模式	Constant Pixel Size / Scale With Screen Size / Constant Physical Size
Reference Resolution	1920×1080	缩放参考分辨率	竖屏游戏 Match=0，横屏 Match=1
Screen Match Mode - Match Width Or Height	-	按宽或高插值匹配屏幕	高匹配时高不变调宽或宽匹配时宽不变调高，按钮大小保持不变，需要自己调整布局
Screen Match Mode - Expand	-	保证 Reference Resolution 完整显示	选择最小缩放因子，按钮随 Canvas 缩放，屏幕越小按钮越小
Screen Match Mode - Shrink	-	填满屏幕，可能裁剪部分 UI	选择最大缩放因子，按钮随 Canvas 缩放，屏幕越小按钮越小
Graphic Raycaster - Ignore Reversed Graphics	false	忽略翻转 UI 射线检测
Graphic Raycaster - Blocking Objects	All	控制哪些对象阻挡射线	None / 2D / 3D / All
Graphic Raycaster - Blocking Mask	All	屏蔽射线阻挡图层

UI Scale Mode 说明

模式	默认值	说明	使用场景
Constant Pixel Size	Scale Factor = 1	UI 固定像素大小，不随分辨率变化	固定分辨率或像素风格游戏
Scale With Screen Size	Reference Resolution = 1920×1080	UI 按屏幕尺寸缩放	多分辨率适配
Constant Physical Size	Physical Unit = Points	UI 按物理尺寸缩放（毫米/英寸）	对物理尺寸敏感的应用

Canvas 适配模式完全解析

术语说明

设计分辨率：Canvas Scaler 中设置的 Reference Resolution
设计宽/高：设计分辨率下的宽度和高度
屏幕宽/高：设备实际屏幕分辨率
k：Canvas 和 UI 元素的最终缩放系数
k_width = 屏幕宽 / 设计宽
k_height = 屏幕高 / 设计高

1. Shrink 模式（Screen Match Mode = Shrink）

核心逻辑：选择最大缩放系数，确保 Canvas 至少有一边完全填满屏幕
缩放系数公式：k = min(k_width, k_height)
设计目标：优先保证屏幕无黑边，可能裁剪超出部分
视觉特征：Canvas 会放大或缩小以填满屏幕，UI 元素等比缩放

屏幕变化	缩放系数计算	适配行为	结果现象
屏幕变宽	k = k_width	按宽适配	Canvas/UI 放大，上下裁剪，宽度100%显示
屏幕变窄	k = k_height	按高适配	Canvas/UI 缩小，左右裁剪，高度100%显示
屏幕变高	k = k_height	按高适配	Canvas/UI 放大，左右裁剪，高度100%显示
屏幕变矮	k = k_width	按宽适配	Canvas/UI 缩小，上下裁剪，宽度100%显示

锚点影响

锚点在 Canvas 四周：随边缘移动，减少裁剪
锚点在 Canvas 中心：屏幕比例变化时易被裁剪

适用场景

游戏界面，全屏显示，沉浸式体验

2. Expand 模式（Screen Match Mode = Expand）

核心逻辑：选择最小缩放系数，保证设计分辨率完整显示
缩放系数公式：k = max(k_width, k_height)
视觉特征：Canvas 完整显示，可能出现黑边

屏幕变化	缩放系数	适配行为	可视屏幕	结果现象
屏幕变宽	k = k_height	按高适配	宽、高	Canvas/UI 大小不变，左右黑边
屏幕变窄	k = k_width	按宽适配	宽×k、高×k	Canvas/UI 缩小，上下黑边
屏幕变高	k = k_width	按宽适配	宽、高	Canvas/UI 大小不变，上下黑边
屏幕变矮	k = k_height	按高适配	宽×k、高×k	Canvas/UI 缩小，左右黑边

黑边处理建议

设置 Camera 背景色
使用背景 Sprite 填充
极端比例添加装饰元素

适用场景

工具类、教育软件、UI 密集应用

3. Match Width Or Height 模式（混合模式）

核心逻辑：宽度与高度之间线性插值
公式：k = Lerp(k_width, k_height, Match)
插值计算：k = k_width * (1-Match) + k_height * Match

Match 参数影响

Match = 0：宽优先，类似 Shrink 宽适配
Match = 1：高优先，类似 Shrink 高适配
Match = 0.5：平衡模式，k ≈ sqrt(k_width * k_height)

动态调整示例

float currentAspect = (float)Screen.width / Screen.height;
float designAspect = referenceWidth / referenceHeight;
canvasScaler.matchWidthOrHeight = currentAspect > designAspect ? 1 : 0;

三种模式总结

模式	核心逻辑	缩放系数	屏幕填充	内容完整性	最佳适用场景
Shrink	min(k_width, k_height)	>1 或 <1	无黑边	至少一边填满，可能裁剪超出部分	游戏、全屏应用、沉浸式体验
Expand	max(k_width, k_height)	<1 或 =1	可能有黑边	设计分辨率完整显示	工具应用、教育软件、UI密集项目
Match W/H	Lerp(k_width, k_height, Match)	动态插值	可控制	可平衡裁剪和黑边程度	复杂项目、多屏幕比例适配

RectTransform（UI 元素）

返回目录

参数	默认值	说明	使用要点
Anchor Min / Max	(0,0) / (1,1)	锚点	控制 UI 相对父节点位置和缩放
Pivot	(0.5,0.5)	中心点	控制旋转、缩放参考点
Size Delta	(100,100)	宽高	受 Anchor 影响
Anchored Position	(0,0)	相对锚点位置	控制父节点中的对齐位置
Local Position	(0,0,0)	相对父节点原点位置	控制局部空间位置

Text / TextMeshProUGUI

返回目录

参数	默认值	说明	使用要点
Text	""	显示内容
Font	默认字体 / TMP Font	字体资源	TMP 高质量字体
Font Size	36	字体大小	TMP 支持浮点精度
Color	白色	文字颜色
Alignment	Left	对齐方式	Left / Center / Right / Justified
Rich Text	true	支持富文本
Outline	无	边缘线
Shadow	无	阴影

Outline（描边组件）

参数名	含义	说明
Effect Color	描边颜色	复制出的图形颜色，即描边本身的颜色。
Effect Distance (X, Y)	偏移距离	X：左右偏移；Y：上下偏移。用于决定描边方向与粗细。

说明：Outline 通过“复制 + 偏移”模拟描边，并非真实轮廓描边；偏移过大会导致形状变形。

Image / RawImage

返回目录

参数	默认值	说明	使用要点
Source Image	None	图片资源	Image 可用 Sprite，RawImage 可用 Texture
Color	白色	图片颜色
Image Type	Simple	Simple / Sliced / Tiled / Filled	Sliced 用于九宫格
Fill Method	Horizontal	Filled 类型使用
Preserve Aspect	false	保持比例	避免拉伸

RawImage 特点

大图、背景图、网络图片，不打图集
Image 更适合 UI 元素

Button

返回目录

参数	默认值	说明	使用要点
Interactable	true	是否可点击
Transition	Color Tint	点击/高亮效果	None / Color / Sprite / Animation
Target Graphic	Image	高亮响应图形
OnClick	空	点击事件

btn.onClick.AddListener(() => { Debug.Log("Button clicked"); });
btn.onClick.RemoveListener(MyFunc);
btn.onClick.RemoveAllListeners();

Toggle / ToggleGroup

1️⃣ Toggle 参数解析

参数	默认值	说明	使用要点 / 优化建议
Is On	false	Toggle 当前选中状态，`true` 表示选中，`false` 表示未选中	初始化默认选中用 `SetIsOnWithoutNotify(true)` 避免触发回调
Transition	Color Tint	Toggle 点击状态变化效果	Color Tint 颜色，Sprite Swap 自定义图片，Animation 动画
Graphic	Checkmark	选中状态显示的 UI 元素（勾选框、图标）	可替换为自定义图片，确保 ToggleGroup 切换时同步显示
Interactable	true	是否可以交互	在禁用时设为 false，防止用户点击
Group	null	所属 ToggleGroup 实例，用于单选组管理	指向同一个 ToggleGroup 保证互斥，不需要手动注册

2️⃣ ToggleGroup 参数解析

参数	默认值	说明	使用要点 / 优化建议
Allow Switch Off	false	是否允许组内全部 Toggle 都为未选中状态	勾选后可以允许用户取消选中，否则组内至少有一个 Toggle 被选中
ActiveToggles()	-	返回当前处于选中状态的 Toggle 枚举	可用于获取当前选中项，结合 List/数组获取索引

toggle.onValueChanged.AddListener((b) => { print("状态改变"); });
foreach (Toggle item in tg.ActiveToggles()) { ... }

InputField

返回目录

InputField 与 TMP_InputField 的核心参数及使用注意。

1. 基础参数表

InputField 参数说明（表格）

参数名称	含义说明
Text Component	输入内容显示用的 Text 组件，InputField 会将输入结果渲染到该组件。
Text	输入框的初始文本内容，即 InputField 的默认文本值。
Character Limit	限制可输入字符数量，为 0 表示不限制。
Content Type	限制输入内容格式，如标准文本、整数、小数、邮箱、密码等。
Placeholder	输入框为空时显示的提示文字组件，输入后自动隐藏。
Caret Blink Rate	光标闪烁速度（秒），数值越小闪烁越快，0 表示光标常亮。
Caret Width	光标宽度（像素），默认 1，可调大以增强可视度。
Custom Caret Color	是否启用自定义光标颜色，关闭则使用文本颜色。
Selection Color	输入框内选中文字的高亮背景色。
Hide Mobile Input	移动端隐藏系统输入 UI（如安卓顶部输入条）。
Read Only	只读模式，可选中文本但无法编辑。
Should Activate On Select	点击 InputField 是否自动激活（弹出光标、开始输入）。

2. Content Type（输入类型）完整说明

ContentType 决定了用户能输入什么内容。
以下内容适用于 InputField 和 TMP_InputField（部分 TMP 扩展更完整）。

Content Type 完整列表

ContentType	说明	行为描述
Standard	标准文本	可输入任意字符（无过滤）
Autocorrected	自动纠正	移动端自动纠正（英文常用）
Integer Number	整数	仅允许 0–9 和负号
Decimal Number	小数	允许数字、小数点、负号
Alphanumeric	字母 + 数字	不允许符号（如 @ # %）
Name	人名格式	首字母大写等（平台相关）
Email Address	邮箱格式	允许 @ . - _ 等符号
Password	密码模式	输入以 “*” 显示，不记录换行
Pin	PIN码	只允许数字，但行为更严格
Custom	自定义	完全依赖你脚本过滤输入

Slider

返回目录

参数	默认值	说明
Min / Max Value	0 / 1	范围
Value	0	当前值
Whole Numbers	false	是否整数
Fill Rect	null	填充条
Handle Rect	null	滑块
OnValueChanged	空	值改变事件

slider.onValueChanged.AddListener((float val) => { Debug.Log(val); });

Scrollbar / ScrollRect（滚动视图）

返回目录

Scrollbar

参数	默认值	说明	使用要点
Handle Rect	null	滑块 RectTransform	若不指定，将生成默认滑块
Direction	Bottom To Top / Left To Right	滑动方向	影响 Value 值增加方向
Value	0	当前滚动值（0~1）	控制滑动位置
Size	0.2	滑块占 Scrollbar 长度比例	大小影响滑动速度和可见区域
Number of Steps	0	步数（0 表示连续）	用于分页滑动
OnValueChanged	空	滑动值变化回调	可绑定方法响应滑动

ScrollRect

参数	默认值	说明	使用要点
Content	null	滚动内容 RectTransform	必须指定滚动内容对象
Horizontal / Vertical	true / true	是否允许水平/垂直滚动	控制滑动方向
Movement Type	Elastic	滚动类型：Unrestricted / Elastic / Clamped	Elastic 可回弹
Elasticity	0.1	弹性系数（Movement Type = Elastic 时生效）	控制回弹速度
Inertia	true	是否启用惯性滚动	启用可滑动惯性效果
Deceleration Rate	0.135	惯性滚动衰减率（Inertia = true 时生效）	越小滑动越慢停下来
Scroll Sensitivity	1	鼠标滚轮滚动灵敏度	数值越大滚动越快
Horizontal / Vertical Scrollbar	null	绑定滑动条	自动更新滑块位置
OnValueChanged	空	滚动值变化事件（Vector2 x/y）	可监听滚动位置变化

ScrollRect 常用属性说明：

Content：ScrollRect 内部的可滚动区域，通常是一个包含 LayoutGroup 的 RectTransform
Movement Type：
- Unrestricted：无限滚动
- Elastic：超过边界会弹回
- Clamped：超过边界直接固定在边界
Inertia 与 Deceleration Rate 配合使用，实现自然滑动效果
Scroll Sensitivity：鼠标滚轮或触摸滑动的放大倍率
绑定 Scrollbar：自动同步滑块位置与 Content 位置

注意事项：

ScrollRect 必须有 RectTransform 内容对象
若内容过小，ScrollRect 不会滚动
结合 LayoutGroup + ContentSizeFitter 可实现动态内容自动布局

Scrollbar 与 ScrollRect 配合技巧

自动滑块
- 将 ScrollRect 的 Horizontal / Vertical Scrollbar 绑定到 Scrollbar
- ScrollRect 会自动更新滑块位置和大小
自定义滑块拖动
- Scrollbar 的 Value 改变时，可手动调整 ScrollRect.content.anchoredPosition，实现自定义滚动逻辑
分页滑动
- 设置 Scrollbar 的 Number of Steps，实现分页滑动

Dropdown（下拉列表）

返回目录

参数	默认值	说明
Value	0	当前索引
Options	[]	选项列表
OnValueChanged	空	事件

dd.onValueChanged.AddListener((int index) => {
    Debug.Log(dd.options[index].text);
});

组件组合示例

返回目录

组合	功能说明
Toggle + ToggleGroup	单选按钮面板
ScrollRect + LayoutGroup + ContentSizeFitter	动态列表自动布局
Button + Image + Text	标准按钮 UI
EventTrigger + Image / Text / RawImage	自定义鼠标/触摸事件
Slider + Image	音量条、血条

图集与 DrawCall 优化

返回目录

打图集目的：减少 DrawCall，提高性能

步骤：

1. 打开：Edit → Project Settings → Editor → Sprite Packer

（开发阶段）选中：V2-Enabled
（打包阶段）选中：V2-Enabled for Builds

版本	选项	编辑器调试效果	Build 后是否打 Atlas	说明
V1	Always Enabled	✅ 编辑/播放模式都用图集	✅ 会打	编辑器和构建都使用图集，适合开发和测试阶段
V1	Enabled for Builds	⚠️ 编辑器调试受限	✅ 会打	构建时保证使用图集，编辑器中调试效果可能略有差异
V2	Enabled	✅ 编辑/播放模式都用图集	✅ 会打（Unity 2023+）	V2 中单选 Enabled 一般会打包，但官方推荐同时使用 Enabled for Builds 确保构建
V2	Enabled for Builds	⚠️ 编辑器调试受限	✅ 会打	构建时保证使用图集，编辑器调试可能与运行时略有差异

2.Resources文件夹右键 Create → 2D → Sprite Atlas

3.选中创建的SPrite Atlas,如果是UI图集，取消勾选Allow Rotation和Tight Packing，其它的不变

Sprite Atlas 相关参数

参数	解释
Type	图集类型，一般选择 Sprite
Include in Build	是否在构建时包含图集资源
Packing	图集打包方式，决定 sprite 在图集中的排列方式
Allow Rotation	打包时是否允许旋转 sprite，以节省空间
Tight Packing	是否启用紧密打包，减少空白边缘
Alpha Dilation	扩展透明像素，防止出现透明边缘闪烁
Padding	sprite 之间的间距，避免采样错误

4.把要打的图集拖入SPrite Atlas的Objects for Packing

代码加载图集

using UnityEngine;
using UnityEngine.U2D;
public class Lesson17 : MonoBehaviour
{
    void Start()
    {
        SpriteAtlas atlas = Resources.Load<SpriteAtlas>("MyAtlas");
        Sprite bk = atlas.GetSprite("bk");
        GetComponent<Image>().sprite = bk;
    }
}

事件接口与 EventTrigger

返回目录

接口	事件	说明
IPointerEnterHandler	OnPointerEnter	鼠标进入
IPointerExitHandler	OnPointerExit	鼠标离开
IPointerDownHandler	OnPointerDown	按下
IPointerUpHandler	OnPointerUp	抬起
IPointerClickHandler	OnPointerClick	点击
IBeginDragHandler	OnBeginDrag	开始拖拽
IDragHandler	OnDrag	拖拽中
IEndDragHandler	OnEndDrag	拖拽结束
IScrollHandler	OnScroll	滚轮

长按实现

使用 IPointerDownHandler + IPointerUpHandler
在 OnPointerDown 开始计时，持续触发事件
OnPointerUp 停止计时

坐标转换与拖拽

返回目录

ScreenPoint → LocalPoint

Vector2 localPoint;
RectTransformUtility.ScreenPointToLocalPointInRectangle(
    parentRect, 
    screenPoint, 
    camera, 
    out localPoint
);

Overlay 模式：camera = null
Camera 模式：camera = eventData.pressEventCamera

Drag 示例

public void Drag(BaseEvent data)
{
    PointerEventData eventData = data as PointerEventData;
    Vector2 nowPos;
    RectTransformUtility.ScreenPointToLocalPointInRectangle(
        this.transform.parent as RectTransform,
        eventData.position,
        null, // Overlay
        out nowPos
    );
    this.transform.localPosition = nowPos;
}

注意事项

Overlay 模式可以直接使用 eventData.position
Camera 模式必须用 ScreenPointToLocalPointInRectangle
enterEventCamera 可能为空，不推荐使用
pressEventCamera 更稳定
使用 Time.deltaTime 防止帧率影响拖拽速度

Mask 遮罩（Mask）

返回目录

Mask 用于 裁剪子对象显示范围，通常用于滚动视图、血条、进度条等 UI 场景。

基本用法

在 父 Image 上添加 Mask 组件
Show Mask Graphic
- true：显示父 Image 本身
- false：父 Image 作为遮罩，不显示自身
在父 Image 下创建 子对象 Image2
- 子对象会被父 Mask 遮罩，超出父 Mask 范围的部分不可见
子对象可选择 取消勾选 Maskable
- 取消后，子对象不受父 Mask 影响，始终显示

示例结构

Image (带 Mask)
│
├── Image2 (受遮罩)
└── Image3 (Maskable = false, 不受遮罩)

3D 模型 / 粒子显示在 UI 之前

返回目录

在 Unity UI 中，如果需要让 3D 模型或粒子特效显示在 UI 之前（覆盖 UI），常用方法有两种：

方法一：直接用摄像机渲染 3D 物体

步骤：

将 Canvas 的 Render Mode 改为 Screen Space—Camera
创建一个 UICamera（专门用于渲染 UI 和 3D 物体）
修改 UICamera 参数：
- Clear Flags：Depth Only
- Culling Mask：UI
- Depth：大于主摄像机 Depth，保证后渲染覆盖
3D 模型放在 Canvas 下或场景中，确保在 UICamera 的渲染范围内

示意图：
Canvas → UICamera → 3D Model

注意：

Canvas 的 Plane Distance 与 UICamera 的距离需合理调整
3D 模型无需修改 Canvas 层级，只要在 UICamera 可见范围即可

方法二：通过 Render Texture 显示模型

步骤：

在 Layer 添加一个新层级，例如 Model
创建一个 Render Texture
创建一个 ModelCamera：
- Clear Flags：Solid Color
- Culling Mask：Model
- Depth：大于等于 UICamera
- Target Texture：拖入 Render Texture
将 3D 模型 Layer 设置为 Model
在 UI 中创建一个 Image，将 Render Texture 赋值给 Image 的 Source Image

示意图：
3D Model → ModelCamera → Render Texture → UI Image

注意：

适合小型 UI 内显示模型，例如头像或预览窗口
Render Texture 分辨率会影响显示效果

粒子特效显示在 UI 之前

粒子系统本质上是 3D 物体渲染，可与上述方法相同：

将粒子系统 Layer 设置为单独层级，例如 Effect
调整粒子系统组件 Renderer → Order in Layer，使其大于 Canvas 的 Order in Layer
无论 z 轴位置如何，粒子都会后渲染覆盖 UI

注意事项：

粒子系统在 Screen Space—Camera 模式下，需要 Canvas 使用相同 Camera 或合理排序
对大量粒子，注意 DrawCall 优化和性能开销

异形按钮准确点击（Alpha 点击检测）

返回目录

Unity 的 UI 点击检测依赖 Graphic Raycaster + Image。对于异形按钮（图标不规则形状），如果使用默认矩形按钮，会出现一个问题：

即使点击透明区域也会触发按钮事件。

为了解决 异形按钮精确点击，可使用以下手段。

基础知识

Unity 的 UI 射线检测基于 Image 组件
- 只有拥有 Image 组件的对象才能被 Graphic Raycaster 检测到。
- Button 实际上依赖内部的 Image 来参与射线检测。
射线检测由子向父逐级冒泡
- 点击子 Image 会触发父对象的点击事件。
- 若不想父对象响应，需要关闭其 Raycast Target。
Image 默认可被射线检测的 Alpha 阈值是 0
- 图片透明区（Alpha=0）也能被点击
- 导致异形按钮透明区域仍可触发点击事件

方案一：使用子节点分块（无需代码，兼容性最好）

适用于形状非常不规则、代码方式无法精确处理的情况。
步骤：

创建父 Image（显示真实图片）。
在其下创建一个 Button，将此 Button 的 Image 颜色调为透明。
在 Button 下创建多个 Image 子对象，全部设置成透明图。
通过 Button 和多个子 Image 矩形组合出目标的“可点击区域形状”，依靠多个矩形拼接用户真正能点击的范围。
注意：

按钮的点击区域由透明 Button 和透明 Image 拼出的矩形决定
适合异形轮廓特别复杂的美术资源

方案二：使用 Alpha 点击检测（强烈推荐）

Image.alphaHitTestMinimumThreshold
步骤：

选中图片 → Inspector
勾选 Read/Write Enabled
设置 Alpha 阈值

image.alphaHitTestMinimumThreshold = 0.1f;

当设置后，Image 的射线检测会根据图片 像素透明度 判断是否可点：
如果鼠标位置对应图片像素的 Alpha < 0.1，则按钮不会响应点击事件。

注意事项：

图片不能使用 Use Crunch Compression
- Crunch 会破坏 alpha 通道采样，导致点击区域混乱
如要压缩图片建议使用：
- Format：RGBA32 / ARGB32 / DXT5（可）
- Max Size 可降低（如 2048 → 256）提高采样精度
只有设置了 Raycast Target 的 Image 才能进行 Alpha 检测：

image.raycastTarget = true;

方案对比

方案	准确度	性能	开发难度	适用场景
方案一：子对象拼合	中等（矩形拼接）	高	中等	异形复杂轮廓，不想写代码
方案二：Alpha 点击检测	极高（像素级）	高	简单	大多数异形按钮，推荐使用

自动布局（Auto Layout）

1. Layout Element（布局元素）

布局元素用于告诉父级布局组件（Horizontal / Vertical / Grid）如何安排子物体的大小。

使用前提：父对象必须挂载 Horizontal Layout Group、Vertical Layout Group 或 Grid Layout Group。
若需要使最小/最大宽高生效，需在父级勾选 Control Child Size（Width / Height）。

参数说明

参数	说明
Min Width	最小宽度
Min Height	最小高度
Preferred Width	最佳宽度（布局优先参考）
Preferred Height	最佳高度
Flexible Width	宽度弹性值（用于多余空间分配，只影响 Horizontal Layout Group）
Flexible Height	高度弹性值（仅影响 Vertical Layout Group）

行为说明

父对象缩放时，子物体大小会根据 Min / Preferred 自动调整
Flexible Width / Height 会将父级剩余空间按比例分配给元素
若使用 Flexible，则 Min/Preferred 可能会被忽略（特别是 Fill 效果出现时）

2. Horizontal Layout Group / Vertical Layout Group

用于实现水平或垂直方向的自动排布。

参数说明

参数	说明
Padding（Left/Right/Top/Bottom）	内边距
Spacing	元素之间的距离
Child Alignment	子元素整体在父区域内的对齐方式（左上、中上、右上等）
Reverse Arrangement	反转子元素排列顺序
Control Child Size（Width/Height）	使用子元素的 Min/Preferred 参数控制大小
Use Child Scale（Width/Height）	子物体缩放时以布局方向为中心对齐
Child Force Expand（Width/Height）	强制让所有子元素平均分配剩余空间（导致填满父对象）

常见用途

水平方向工具栏、物品栏
垂直方向聊天气泡、任务列表
结合 Content Size Fitter 实现动态内容增长

3. Grid Layout Group（网格布局）

将子对象以网格形式排列。

参数说明

参数	说明
Padding（四个方向）	内边距
Cell Size	每个格子的宽高
Spacing	格子间距
Start Corner	起始位置（左上/右上/左下/右下）
Start Axis	优先按行还是按列排列
Child Alignment	整体对齐方式
Constraint	限制方式（见下）
Constraint Count	行数或列数

Constraint 说明

模式	解释
Flexible	自动根据父容器大小动态排列
Fixed Column Count	固定列数，行数自动增长
Fixed Row Count	固定行数，列数自动增长

4. Content Size Fitter（内容大小适配器）

根据子内容更新 RectTransform 的大小。
常用于自适应 Text 或动态 Content。

参数说明

参数	说明
Horizontal Fit	Unconstrained / Min Size / Preferred Size
Vertical Fit	同上

使用场景一：文本自动扩展

适用于 Text / TextMeshPro
设置 Horizontal Fit + Vertical Fit = Preferred Size
RectTransform 会根据文本内容自动扩大

⚠ 注意：文本 Preferred Size 是 随内容动态变化 的

使用场景二：ScrollRect 的 Content 动态扩展

Scroll View 中不断添加元素时，Content 区域需要自动变大：

必备组合：

Grid / Vertical / Horizontal Layout Group
Content Size Fitter（Preferred Size）

Content 会根据子元素数量自动伸缩，无需手动设置 sizeDelta。

5. Aspect Ratio Fitter（宽高比适配器）

保持 UI 元素的宽高比不变（例如图像、视频窗口）。

参数说明

参数	说明
Aspect Mode	宽高比适配模式（见下）
Aspect Ratio	宽 / 高的比值

Aspect Mode 详解

模式	行为
None	不适配宽高比
Width Controls Height	根据宽度自动调整高度
Height Controls Width	根据高度自动调整宽度
Fit In Parent	在父对象内完整显示，保持宽高比（可能留黑边）
Envelope Parent	覆盖父对象全部区域，保持宽高比（可能裁剪）

6. 自动布局组件组合建议

需求	建议组合
文本大小随内容变化	Text + Content Size Fitter（Preferred）
聊天列表、任务列表	Vertical Layout Group + Content Size Fitter
物品网格自动整理	Grid Layout Group
带分页或自适应网格	Grid Layout Group（Fixed Column Count / Row Count）
图片保持宽高比不变	Image + Aspect Ratio Fitter

7. 自动布局常见坑点汇总

Layout Group 与 Content Size Fitter 不要同时作用在同一对象上（会互相循环更新）
子元素的 Anchor 通常保持在左上，否则布局可能错乱
Flexible Width/Height 会导致填满，常使 Min/Preferred 不生效
文本 Preferred Size 动态变化，会引起父对象尺寸级联变化

Canvas Group（画布组控制）

Canvas Group 用于控制 UI 面板及其所有子对象的透明度、交互性与射线检测能力，常用于 淡入淡出、整体禁用、弹窗控制 等场景。
参数说明

参数	说明
Alpha	面板整体透明度（0 = 全透明，1 = 完全不透明）
Interactable	是否允许与 UI 交互（Button、Slider 等）
Blocks Raycasts	是否阻挡射线（是否让 UI 可“点中”）
Ignore Parent Groups	是否忽略父级 Canvas Group 的设置

以上就是UGUI的全部常用内容
UGUI的代码是能被直接看到的
Unity安装目录下
Data\Resources\PackageManager\BuiltInPackages\com.unity.ugui
随着自己的能力提升
以后可以深入去了解一下它的一些逻辑实现

posted @ 2025-11-12 15:34 高山仰止666 阅读(1) 评论(0) 收藏举报

刷新页面返回顶部

高山仰止

UGUI

Unity UGUI 高级参考手册

目录

Canvas（画布）

UI Scale Mode 说明

Canvas 适配模式完全解析

1. Shrink 模式（Screen Match Mode = Shrink）

2. Expand 模式（Screen Match Mode = Expand）

3. Match Width Or Height 模式（混合模式）

RectTransform（UI 元素）

Text / TextMeshProUGUI

Outline（描边组件）

Image / RawImage

Button

Toggle / ToggleGroup

1️⃣ Toggle 参数解析

2️⃣ ToggleGroup 参数解析

InputField

1. 基础参数表

InputField 参数说明（表格）

2. Content Type（输入类型）完整说明

Content Type 完整列表

Slider

Scrollbar / ScrollRect（滚动视图）

Scrollbar

ScrollRect

Scrollbar 与 ScrollRect 配合技巧

Dropdown（下拉列表）

组件组合示例

图集与 DrawCall 优化

步骤：

1. 打开：Edit → Project Settings → Editor → Sprite Packer

2.Resources文件夹右键 Create → 2D → Sprite Atlas

3.选中创建的SPrite Atlas,如果是UI图集，取消勾选Allow Rotation和Tight Packing，其它的不变

4.把要打的图集拖入SPrite Atlas的Objects for Packing

事件接口与 EventTrigger

坐标转换与拖拽

ScreenPoint → LocalPoint

Drag 示例

注意事项

Mask 遮罩（Mask）

基本用法

示例结构

3D 模型 / 粒子显示在 UI 之前

方法一：直接用摄像机渲染 3D 物体

方法二：通过 Render Texture 显示模型

粒子特效显示在 UI 之前

异形按钮准确点击（Alpha 点击检测）

基础知识

方案一：使用子节点分块（无需代码，兼容性最好）

方案二：使用 Alpha 点击检测（强烈推荐）

方案对比

自动布局（Auto Layout）

1. Layout Element（布局元素）

参数说明

行为说明

2. Horizontal Layout Group / Vertical Layout Group

参数说明

常见用途

3. Grid Layout Group（网格布局）

参数说明

Constraint 说明

4. Content Size Fitter（内容大小适配器）

参数说明

使用场景一：文本自动扩展

使用场景二：ScrollRect 的 Content 动态扩展

5. Aspect Ratio Fitter（宽高比适配器）

参数说明

Aspect Mode 详解

6. 自动布局组件组合建议

7. 自动布局常见坑点汇总

Canvas Group（画布组控制）

公告