Unity UGUI布局组件（LayoutGroup、ContentSizeFitter、LayoutElement）详解

UGUI 自动布局是一套基于接口、分两轮四阶段、脏标记延迟批量执行的 C# 排版系统和 Transform 原生锚点完全隔离 所有布局组件都围绕两个接口ILayoutElement提供尺寸信息min/preferred/flexible回答 “我应该多大”ILayoutControllerILayoutGroup收集子元素尺寸、分配空间、写 RectTransform负责 “把大家摆到哪”Unity三个组件分工LayoutElement数据提供者覆盖 / 声明自己的布局尺寸参数优先级最高LayoutGroupVertical/Horizontal/Grid既是 ILayoutElement对外输出自己整体尺寸又是 ILayoutController控制子物体位置大小ContentSizeFitter只做 ILayoutController只读同物体上 ILayoutElement 的尺寸修改自身 RectTransform 大小不控制子物体整套布局不生成 Mesh、不渲染最终输出只有对 RectTransform 的sizeDelta/anchoredPosition的赋值。LayoutElementLayoutElement 是 ILayoutElement 的实现只负责向外输出尺寸信息不摆放物体、不修改 RectTransform 位置用来覆盖 / 重写 Text、Image、LayoutGroup 自带的 min/preferred/flexible 尺寸。面板逐项解释1. Ignore Layout勾选之后布局系统直接跳过这个物体不参与父 LayoutGroup 的排版计算。这个物体还留在层级里渲染正常2. Min Width / Min Height最小宽高勾选激活填写像素值这个元素被压缩时不能小于这个尺寸是底线。3. Preferred Width / Preferred Height期望 / 偏好宽高勾选激活填写像素值元素最理想、刚刚好的尺寸。 空间足够、满足所有 Min 之后布局系统会尽量把元素给到 Preferred 尺寸。4. Flexible Width / Flexible Height弹性宽高勾选激活填写比例系数不是像素当父 LayoutGroup 分配完所有 MinPreferred 之后还有剩余空白空间就按照所有子 Flexible 的比值瓜分剩下空间。例子 水平布局里两个子A Flexible Width1B Flexible Width2剩余空间一共 300px → A 拿 100B 拿 200。只要任意一个子 Flexible0剩余空间就会被瓜分全部 0就不会拉伸填充。区分Min、Preferred 是像素单位Flexible 是相对权重。5. Layout Priority布局优先级默认 1同一个 GameObject 身上可能有多个 ILayoutElement比如 Text LayoutElement数值越大优先级越高布局系统优先读取高优先级组件输出的尺寸覆盖低优先级Text、Image 原生的 LayoutPriority 默认是 0LayoutElement 默认是 1。这就是为什么挂上 LayoutElement 勾选 Preferred会直接覆盖 Text 文字原生自适应尺寸LayoutElement 优先级更高。如果优先级相同布局会取各个组件里更大的尺寸值。注意理解LayoutElement 这个组件本身挂在物体上不需要 “必须有父物体”但是它的功能想要生效就必须有父级的布局控制器ILayoutController布局控制器 HorizontalLayoutGroup / VerticalLayoutGroup / ContentSizeFitterLayoutElement 的角色对外上报尺寸数据min/preferred/flexible布局控制器的角色读取子物体上报的这些尺寸数据然后去排版、改子物体 RectTransform1. 单纯挂上 LayoutElement没有父 Layout 控制器你可以随便挂不会报错组件面板正常显示完全没有任何视觉效果等于白挂原因LayoutElement 只是一个数据记录本 。它只会存我的最小宽 30、期望宽 100、弹性权重 1……但是没有任何东西来读这份记录就不会有人根据这个数据修改物体大小、位置。2. 有父布局控制器的时候这才是 LayoutElement 的正常用法LayoutElement 是给【直接父 LayoutGroup】读的不是随便哪个祖先是直属父物体3. 一个特殊情况同物体身上搭配 ContentSizeFitterLayoutElement 和 ContentSizeFitter 在同一个物体上不需要别的父 Layout这个场景下不需要外面再套一个父 LayoutGroup作用用 LayoutElement 强行指定这个物体的 preferred 尺寸ContentSizeFitter 把自己缩放到这个 preferred 大小。4. 再单独说 Ignore LayoutLayoutElement 里这个选项特殊Ignore Layout 生效条件这个物体必须是某个 LayoutGroup 的直接子物体父 LayoutGroup 遍历直接子的时候看到子勾选 Ignore Layout → 跳过它不参与排版。如果它根本不是任何 LayoutGroup 的子Ignore Layout 这个勾勾了也没用。Flexible 填 1 不等于占 100%是比值必须多个兄弟一起对比LayoutPriority 是同一个物体多个 ILayoutElement 之间的优先级不是兄弟物体之间的优先级三个 LayoutGroupGrid Layout Group/Horizontal Layout Group/Vertical Layout Group都是ILayoutController布局控制器作用自动排列自己的直接子物体。Horizontal水平一排横向摆放会读取子 LayoutElement 的 Min/Preferred/Flexible弹性生效Vertical垂直一列纵向摆放会读取子 LayoutElement 的 Min/Preferred/Flexible弹性生效Grid网格格子布局固定 CellSize无视子的 Min/Preferred/FlexibleLayoutElement 尺寸除 Ignore Layout 外全部无效)Horizontal Layout Group 水平布局组横向一排排列子物体Padding内边距。Spacing子物体和子物体之间的间距横向间隔。Child Alignment在父容器里怎么对齐Reverse Arrangement反向排列Control Child Size控制子尺寸重点勾选Height代表父 LayoutGroup 接管子物体高度子物体 RectTransform 的高度直接被引擎锁死、不能手动拖拽改。勾选之后子多高多宽由父说了算子自己 LayoutElement 尺寸规则失效。Use Child Scale使用子缩放是否把子物体 RectTransform 的 Scale 算进布局计算里。 一般不勾。如果你的子要动态缩放 UI再开启容易排版错乱。Child Force Expand子强制扩展弹性总开关超级高频Width开启横向弹性通道。 勾选✔后如果子没有自己设置 Flexible布局默认给所有子 Flexible1平分剩余空间 子自己 LayoutElement 写了 Flexible就按写的权重瓜分剩余空白不勾Flexible 完全失效不会自动撑满Height纵向弹性一般很少开。Vertical Layout Group 垂直布局组纵向一列排列子物体参数和 Horizontal 几乎一模一样只是排列方向从上往下。Grid Layout Group 网格布局格子布局重点和上面两个本质不一样核心区别Grid 不读取子的任何 Min/Preferred/FlexibleLayoutElement 尺寸设置无效Grid 逻辑我规定每个格子多大Cell Size所有子强制塞进格子里。Padding网格整体离父容器四边的内边距Cell Size网格核心每个格子的宽和高。这里是 100×100所有子都会被强制放到 100×100 的格子里面。 子物体 Rect 会被 Grid 自动设置成这个尺寸无视 Image/TMP/LayoutElement 想要的大小。Spacing格子与格子之间的间距X 横向格子间距Y 纵向格子间距。Start Corner起始角落从哪个角落开始放第一个子Upper Left 左上 / Upper Right 右上 / Lower Left 左下 / Lower Right 右下。Start Axis起始轴Horizontal优先先排满一行再换行一行放多个再下一行最常用Vertical优先先排满一列再换列一列放满再往右开新列Child Alignment整组网格在父容器里怎么对齐和锚点有关系吗Grid Layout Group 不但不读子物体的锚点还会强行把所有子物体的锚点改成同一个值——左上角(0, 1)由 GridLayoutGroup 驱动的部分参数Constraint 约束模式控制一行多少个 / 一列多少个非常常用Flexible你当前这个自动适配根据父容器宽度自动算一行能放下几个格子父拉宽一行格子变多父变窄一行变少。适合动态网格商品、图标。Fixed Column Count固定列数比如填 3 →永远一行 3 个不管父多宽自动缩放格子间距 / 换行。Fixed Row Count固定行数比如填 2 → 永远一共 2 行。Grid 里面子身上的 LayoutElementIgnore Layout 正常生效勾选后这个子不参与网格排版自由摆放Min / Preferred / Flexible 全部无效Grid 强制 CellSize不走那套分配算法。Content Size Fitter内容尺寸适配器ContentSizeFitter简称 CSF是让自己这个物体的 Rect 大小去贴合它内部内容的 Preferred 尺寸LayoutGroupHorizontal/Vertical/Grid是父管子父来安排子的位置大小CSF 是自己管自己自己根据内部内容自动改变自身宽高 它也是布局控制器ILayoutControllerParent has a type of layout group component. A child of a layout group should not have a Content Size Fitter component, since it should be driven by the layout group.父物体是 LayoutGroupHorizontal/Vertical/Grid这个子物体不建议挂 ContentSizeFitter子的尺寸应该由父 LayoutGroup 来驱动控制。为什么 Unity 给这个警告这里出现了两个控制器抢着控制同一个 RectTransform父HorizontalLayoutGroup它想决定这个子有多宽、放哪里父 Layout 来分配空间子ContentSizeFitter它又想自己决定自己的宽高我要贴合我内部内容 两个布局引擎同时驱动同一个 Rect →布局循环冲突容易抖动、计算错乱、编辑模式闪、Play 模式尺寸随机分两种情况理解不是绝对不能用是容易踩坑情况 A不推荐、警告的结构父HorizontalLayoutGroup父要分配子的尺寸 └──子Image/TMP ContentSizeFitter子又想自己控制自己大小Unity 警告。 能不能跑有时候能跑但是不稳定布局循环风险很高不推荐这么写。情况 B标准、安全、推荐的 CSF 用法不会警告CSF 放在LayoutGroup 自己身上物体AVerticalLayoutGroup ContentSizeFitter ├─子1 ├─子2 └─子3含义 内部 Vertical 自动排列子然后 CSF 让物体 A 的外框自动包裹住里面所有子加起来的总大小。这个是聊天气泡、动态弹窗最经典写法没有警告是正确用法。那如果我 就是想要Horizontal 里面有一个子大小自适应自身内容怎么办正确做法 子物体不要挂 CSF靠子身上的 LayoutElement 的 Preferred 尺寸对外上报 父 HorizontalLayoutGroup 读取子的 Preferred自动适配这个子的大小这才是 Horizontal/VerticalLayoutGroup 的设计逻辑。TMP 自带 ILayoutElement自带 Preferred 尺寸直接给父 Horizontal 读不需要子加 CSF。CSF LayoutElement 的搭配同一个物体ContentSizeFitter LayoutElement作用 CSF 默认跟着 Preferred 走LayoutElement 可以给它加边界限制例子 TMP CSF (HorizontalPreferred) LayoutElementLayoutElement MinWidth30PreferredWidth200 效果 CSF 包裹文字但是宽度最小锁死 30文字短的时候框不会缩到比 30 更小。这里是安全的不会警告因为这个物体外面没有 LayoutGroup 父。4 种常用搭配速记TMP 聊天气泡TMP CSF HorizontalPreferred, VerticalPreferred 无 LayoutGroup 父自动包裹的容器VerticalLayoutGroup CSF Both Preferred CSF 和 LayoutGroup 在同一个物体标准写法横向一行里面 TMP 文字自适应父 HorizontalLayoutGroup子 TMP不加 CSF靠 TMP 原生 PreferredGrid 的子绝对不要加 CSFGrid 强制 CellSize冲突爆炸