Chapter 2. Building Layouts
贯通RectTransform、Canvas组件、自动布局、尺寸适配、遮罩、缩放与EventSystem；用布局探针、事件路由和多分辨率发布门完成独立复核。
学习目标
- 能说明“Chapter 2. Building Layouts”如何贯通RectTransform、Canvas组件、自动布局、尺寸适配、遮罩、缩放与EventSystem，并明确2015年uGUI原书与Unity 6现行资料的时代边界
- 能先预测“怎样确定锚点、Layout Group、Fitter与Canvas Scaler的唯一尺寸写入者，并让输入路由不受重排破坏？”的布局或事件结果，再沿层级、矩形、画布、相机、射线和处理器逐阶段核对
- 能注入“Layout Group与Content Size Fitter循环写入同一尺寸，编辑器预览稳定而运行时持续重建”，用“同一RectTransform属性只有一个权威布局写入者，缩放策略有参考分辨率，射线目标与可见层级一致”决定接受、修正或拒绝UI发布
为什么从这个UI任务开始
布局页把自动重排视作尺寸依赖图；任何组件写宽高前，都必须说明输入、输出以及是否与父子布局循环。 “Chapter 2. Building Layouts”使用的贯穿任务是：构建可滚动商品栏，在横竖屏切换中检查网格、内容尺寸、遮罩、Canvas Scaler和点击目标。 操作前先预测哪个矩形、射线目标或事件处理器会变化，运行后再补理由不算预测。
本页围绕“怎样确定锚点、Layout Group、Fitter与Canvas Scaler的唯一尺寸写入者，并让输入路由不受重排破坏？”建立正常、故障与恢复路径。只有“Chapter 2. Building Layouts”保持“同一RectTransform属性只有一个权威布局写入者，缩放策略有参考分辨率，射线目标与可见层级一致”并交付RectTransform矩阵、Canvas与Renderer层级、布局输入输出、Fitter所有权、遮罩边界、缩放样本和事件射线路径。，编辑器画面才构成UI证据。
书目、38组条目与UI时代
“Chapter 2. Building Layouts”以作者公告核对Simon Jackson在2014年发布的《Unity 3D UI Essentials》及其围绕Unity 4.6新UI、动态缩放、效果和世界空间界面的定位；出版社授权预览核对第一版详细目录，中文版书页核对《Unity UI设计》出版信息。课程分母为六章与附录合并后的38组公开目录条目。
“Chapter 2. Building Layouts”只依据作者公告、授权样章和公开目录限定范围，不逐段改写原文；解释、状态模型、交互、练习与答案均为独立教学重写。每个合并目录组保留组内全部英文小节名，不能用一个现代主题替换。
“Chapter 2. Building Layouts”另以技术核对 1、技术核对 2、技术核对 3、技术核对 4、技术核对 5核对现行技术事实。2015年的旧GUI对照、uGUI初版面板和源码仓库流程保留为原书时代轨；Unity 6的uGUI 2.0与UI系统比较只验证稳定布局、画布和事件机制或说明迁移边界，不能反向证明原书当年的菜单、包和默认值。
公开目录条目与UI机制
The Rect Transforms；The Rect Transform component
↡UI条目1对应目录条目组“The Rect Transforms；The Rect Transform component”，在“Chapter 2. Building Layouts”中用于以父矩形中的归一锚点、轴心和偏移计算UI矩形，并受Unity时代、层级、矩形、画布、输入和相机边界约束。公开坐标 1/7。 在“Chapter 2. Building Layouts”的坐标1中，The Rect Transforms；The Rect Transform component用于以父矩形中的归一锚点、轴心和偏移计算UI矩形；先锁定场景和层级，再用Anchor Min/Max、Pivot、offset、父尺寸与运行结果复核，出现只在参考分辨率拖出绝对坐标时不得发布。
The Canvas；The Canvas Renderer；Canvas Groups
↡The Canvas对应目录条目组“The Canvas；The Canvas Renderer；Canvas Groups”，在“Chapter 2. Building Layouts”中用于由Canvas空间、排序、相机和组状态决定渲染与交互边界，并受Unity时代、层级、矩形、画布、输入和相机边界约束。公开坐标 2/7。 The Canvas；The Canvas Renderer；Canvas Groups进入“Chapter 2. Building Layouts”后要回答第2张布局卡：它怎样由Canvas空间、排序、相机和组状态决定渲染与交互边界、改变哪个矩形或目标、由哪些Render Mode、相机、排序、透明度、射线与屏幕结果证明，并如何排除画面可见就假定事件相机正确。
Horizontal Layout Group；Vertical Layout Group；Grid Layout Group
↡UI条目3对应目录条目组“Horizontal Layout Group；Vertical Layout Group；Grid Layout Group”，在“Chapter 2. Building Layouts”中用于把最小、首选与弹性尺寸沿布局依赖图分配给子项，并受Unity时代、层级、矩形、画布、输入和相机边界约束。公开坐标 3/7。 围绕“怎样确定锚点、Layout Group、Fitter与Canvas Scaler的唯一尺寸写入者，并让输入路由不受重排破坏？”，条目3把Horizontal Layout Group；Vertical Layout Group；Grid Layout Group解释为把最小、首选与弹性尺寸沿布局依赖图分配给子项；复核者先读取布局输入、尺寸写入者、重建次数和最终矩形再判断画面，不能接受多个组件循环写同一宽高。
Layout Element；Content Size Fitter；Aspect Ratio Fitter
↡Layout Element对应目录条目组“Layout Element；Content Size Fitter；Aspect Ratio Fitter”，在“Chapter 2. Building Layouts”中用于把最小、首选与弹性尺寸沿布局依赖图分配给子项，并受Unity时代、层级、矩形、画布、输入和相机边界约束。公开坐标 4/7。 对“Chapter 2. Building Layouts”而言，Layout Element；Content Size Fitter；Aspect Ratio Fitter的最小合同是把最小、首选与弹性尺寸沿布局依赖图分配给子项，第4次检查保存布局输入、尺寸写入者、重建次数和最终矩形；若产生多个组件循环写同一宽高，就回到层级、布局或事件上游。
Scroll Rect；Masks；Resolution and scaling
↡Scroll Rect对应目录条目组“Scroll Rect；Masks；Resolution and scaling”，在“Chapter 2. Building Layouts”中用于用视口裁剪内容并按产品度量政策缩放Canvas，并受Unity时代、层级、矩形、画布、输入和相机边界约束。公开坐标 5/7。 第5个公开条目组Scroll Rect；Masks；Resolution and scaling服务于贯通RectTransform、Canvas组件、自动布局、尺寸适配、遮罩、缩放与EventSystem，需要以视口、内容边界、缩放模式、参考分辨率、Match与安全区呈现用视口裁剪内容并按产品度量政策缩放Canvas；以单一16:9截图替代边界矩阵会破坏“同一RectTransform属性只有一个权威布局写入者，缩放策略有参考分辨率，射线目标与可见层级一致”。
Constant Pixel Size；Scale with Screen Size；Constant Physical Size
↡UI条目6对应目录条目组“Constant Pixel Size；Scale with Screen Size；Constant Physical Size”，在“Chapter 2. Building Layouts”中用于用视口裁剪内容并按产品度量政策缩放Canvas，并受Unity时代、层级、矩形、画布、输入和相机边界约束。公开坐标 6/7。 学习者在“Chapter 2. Building Layouts”中讨论Constant Pixel Size；Scale with Screen Size；Constant Physical Size前预测用视口裁剪内容并按产品度量政策缩放Canvas会改变哪项布局或交互状态，再读取视口、内容边界、缩放模式、参考分辨率、Match与安全区；观察到以单一16:9截图替代边界矩阵时保留失败轨迹。
The UnityEvent system；Raycasting；Input modules；Event Triggers
↡UI条目7对应目录条目组“The UnityEvent system；Raycasting；Input modules；Event Triggers”，在“Chapter 2. Building Layouts”中用于从活动输入模块经Raycaster生成事件数据并选择目标，并受Unity时代、层级、矩形、画布、输入和相机边界约束。公开坐标 7/7。 构建可滚动商品栏，在横竖屏切换中检查网格、内容尺寸、遮罩、Canvas Scaler和点击目标。 在条目7处理The UnityEvent system；Raycasting；Input modules；Event Triggers时，要把从活动输入模块经Raycaster生成事件数据并选择目标写进UI合同，把输入样本、活动模块、RaycastResult排序、目标和事件日志写进运行记录，并把多个模块或错误相机竞争同一输入写进故障样本。
先预测，再操作三个UI实验
1. 画布锚点与布局探针
切换“商品网格、滚动视口、缩放基准条”以及手机竖屏、横屏和桌面窗口，核对Anchor Min/Max、Pivot、offset与安全区怎样连接“Chapter 2. Building Layouts”。
画布与锚点探针
固定布局合同，再切换分辨率
怎样确定锚点、Layout Group、Fitter与Canvas Scaler的唯一尺寸写入者，并让输入路由不受重排破坏？
目标视口
被测 RectTransform
Anchor Min / Max(0.05, 0.9) → (0.05, 0.9)
Pivot / Offset(0, 1) · +16, -16
本页目录坐标：The Rect Transforms；The Rect Transform component、The Canvas；The Canvas Renderer；Canvas Groups、Horizontal Layout Group；Vertical Layout Group；Grid Layout Group、Layout Element；Content Size Fitter；Aspect Ratio Fitter、Scroll Rect；Masks；Resolution and scaling、Constant Pixel Size；Scale with Screen Size；Constant Physical Size、The UnityEvent system；Raycasting；Input modules；Event Triggers
Chapter 2. Building Layouts的可重放UI协议
| 阶段 | UI动作 | 必留证据 | 拒绝条件 |
|---|---|---|---|
| 声明层级和尺寸所有权 | 在“Chapter 2. Building Layouts”执行声明层级和尺寸所有权，只允许声明组件写入布局或状态 | Unity版本、场景层级、视口与初始状态 | 层级或对象身份不可追溯 |
| 组合布局遮罩与缩放 | 在“Chapter 2. Building Layouts”执行组合布局遮罩与缩放，只允许声明组件写入布局或状态 | RectTransform、Canvas、相机、射线与事件轨迹 | Layout Group与Content Size Fitter循环写入同一尺寸，编辑器预览稳定而运行时持续重建 |
| 追踪输入射线和事件 | 在“Chapter 2. Building Layouts”执行追踪输入射线和事件，只允许声明组件写入布局或状态 | 分辨率矩阵、构建截图、迁移与回退记录 | 无法重放或恢复基线 |
unit: "uid-02"
question: "怎样确定锚点、Layout Group、Fitter与Canvas Scaler的唯一尺寸写入者，并让输入路由不受重排破坏？"
scenario: "构建可滚动商品栏，在横竖屏切换中检查网格、内容尺寸、遮罩、Canvas Scaler和点击目标。"
panels: ["商品网格", "滚动视口", "缩放基准条"]
stages: ["声明层级和尺寸所有权", "组合布局遮罩与缩放", "追踪输入射线和事件"]
invariant: "同一RectTransform属性只有一个权威布局写入者，缩放策略有参考分辨率，射线目标与可见层级一致"
fault: "Layout Group与Content Size Fitter循环写入同一尺寸，编辑器预览稳定而运行时持续重建"
evidence: "RectTransform矩阵、Canvas与Renderer层级、布局输入输出、Fitter所有权、遮罩边界、缩放样本和事件射线路径。"
reset: restore_viewport_panel_route_step_gates_and_artifact该协议要求“Chapter 2. Building Layouts”在相同Unity版本、场景、层级、视口、输入和初始状态下重放。重置后若视口、面板、路由模式、步骤、发布门或证据显示没有回到基线，交互状态已经污染比较，不能作为UI证据。
本页回顾
掌握“Chapter 2. Building Layouts”不是记住编辑器点击顺序，而是能围绕“怎样确定锚点、Layout Group、Fitter与Canvas Scaler的唯一尺寸写入者，并让输入路由不受重排破坏？”重建UI状态，并用“同一RectTransform属性只有一个权威布局写入者，缩放策略有参考分辨率，射线目标与可见层级一致”拒绝“Layout Group与Content Size Fitter循环写入同一尺寸，编辑器预览稳定而运行时持续重建”。最终交付为RectTransform矩阵、Canvas与Renderer层级、布局输入输出、Fitter所有权、遮罩边界、缩放样本和事件射线路径。
练习与答案
练习
- 问题 1：UI合同。 “Chapter 2. Building Layouts”为什么必须先声明Unity版本、场景层级、视口、布局写入者、相机与输入模块？
- 问题 2：目录逐项覆盖。 怎样证明公开条目组已经进入机制、交互和练习？
- 问题 3：故障恢复。 怎样证明“Layout Group与Content Size Fitter循环写入同一尺寸，编辑器预览稳定而运行时持续重建”已经被修正？
名词解释
名词解释
本章出现的专业名词，用大白话再讲一遍。
- UI条目1
对应“The Rect Transforms；The Rect Transform component”；在“Chapter 2. Building Layouts”中用于以父矩形中的归一锚点、轴心和偏移计算UI矩形，需要连接Unity时代、层级、矩形、画布、输入与目标。
- The Canvas
对应“The Canvas；The Canvas Renderer；Canvas Groups”；在“Chapter 2. Building Layouts”中用于由Canvas空间、排序、相机和组状态决定渲染与交互边界，需要连接Unity时代、层级、矩形、画布、输入与目标。
- UI条目3
对应“Horizontal Layout Group；Vertical Layout Group；Grid Layout Group”；在“Chapter 2. Building Layouts”中用于把最小、首选与弹性尺寸沿布局依赖图分配给子项，需要连接Unity时代、层级、矩形、画布、输入与目标。
- Layout Element
对应“Layout Element；Content Size Fitter；Aspect Ratio Fitter”；在“Chapter 2. Building Layouts”中用于把最小、首选与弹性尺寸沿布局依赖图分配给子项，需要连接Unity时代、层级、矩形、画布、输入与目标。
- Scroll Rect
对应“Scroll Rect；Masks；Resolution and scaling”；在“Chapter 2. Building Layouts”中用于用视口裁剪内容并按产品度量政策缩放Canvas，需要连接Unity时代、层级、矩形、画布、输入与目标。
- UI条目6
对应“Constant Pixel Size；Scale with Screen Size；Constant Physical Size”；在“Chapter 2. Building Layouts”中用于用视口裁剪内容并按产品度量政策缩放Canvas，需要连接Unity时代、层级、矩形、画布、输入与目标。
- UI条目7
对应“The UnityEvent system；Raycasting；Input modules；Event Triggers”；在“Chapter 2. Building Layouts”中用于从活动输入模块经Raycaster生成事件数据并选择目标，需要连接Unity时代、层级、矩形、画布、输入与目标。