在 Unity 中，Canvas 的嵌套（子 Canvas 挂载在父 Canvas 下）是常见的 UI 布局方式，核心作用是精细化控制 UI 的渲染层级、渲染模式、缩放规则，但嵌套不当易引发渲染异常、性能问题或适配错误。以下是嵌套 Canvas 的完整指南，包括核心逻辑、使用场景、配置规范和避坑要点：
一、嵌套 Canvas 的核心逻辑
1. 基础规则
- 子 Canvas 会继承父 Canvas 的部分属性，但可覆盖独立属性（如渲染模式、缩放模式、Sorting Layer）；
- 渲染优先级：Canvas 的渲染顺序由「Sorting Layer + Order in Layer + 父子层级」共同决定，子 Canvas 的渲染完全独立于父 Canvas 的子元素（即使父 Canvas 的元素 Order 更高，也无法覆盖子 Canvas 的内容）；
- 性能逻辑：每个 Canvas 是一个独立的 “渲染批次单元”，嵌套 Canvas 会增加 DrawCall（但合理嵌套可减少批次重算）。
二、嵌套 Canvas 的核心使用场景
1. 分离 “静态 UI” 与 “动态 UI”（性能优化）
- 场景：主界面有静态背景（如边框、标题）和动态元素（如滚动列表、按钮动画）；
- 做法：
- 父 Canvas：承载静态 UI（禁用 Raycast Target，减少事件检测）；
- 子 Canvas：承载动态 UI（单独控制渲染批次，避免静态 UI 因动态元素重绘）；
- 优势：静态 UI 仅在初始化时渲染一次，动态 UI 的更新不会触发整个 Canvas 的批次重算。
2. 不同缩放 / 适配规则的 UI 分区
- 场景：游戏内 “血条（需跟随 3D 角色，World Space）” 嵌套在 “主界面（Screen Space - Overlay）” 中；
- 做法：
- 父 Canvas：Screen Space - Overlay（适配屏幕）；
- 子 Canvas：World Space（挂载在角色身上，独立缩放 / 旋转）；
- 优势：不同 UI 分区的适配规则互不干扰。
3. 独立控制渲染层级（避免层级混乱）
- 场景：弹窗 UI 需要覆盖所有底层 UI，但底层 UI 有复杂的局部层级；
- 做法：
- 父 Canvas：底层 UI（Sorting Layer=UI，Order=0）；
- 子 Canvas：弹窗 UI（Sorting Layer=UI，Order=10）；
- 优势：弹窗无需调整大量子元素的 Order，直接通过 Canvas 层级覆盖。
4. 多相机渲染不同 UI 分区
- 场景：主相机渲染游戏场景，UI 相机渲染 2D 界面，小地图相机渲染 3D 小地图；
- 做法：
- 根 Canvas1：绑定 UI 相机（Screen Space - Camera），渲染 2D 界面；
- 根 Canvas2（嵌套）：绑定小地图相机（World Space），渲染 3D 小地图；
- 优势：不同 UI 分区绑定不同相机，实现画中画、分层渲染。
三、正确配置嵌套 Canvas 的步骤（示例）
以 “主界面（静态）+ 弹窗（动态）” 为例：
步骤 1：创建根 Canvas（父）
- 右键→UI→Canvas，命名为
RootCanvas； - 配置：
- Render Mode：Screen Space - Overlay；
- UI Scale Mode：Scale With Screen Size；
- Reference Resolution：1920×1080（设计分辨率）；
- Sorting Layer：UI，Order in Layer：0；
- 向其中添加静态 UI（如背景图、标题）。
步骤 2：创建子 Canvas
- 在
RootCanvas下右键→UI→Canvas，命名为PopupCanvas； - 配置（覆盖独立属性）：
- UI Scale Mode：Match Width Or Height（与父一致，也可单独改）；
- Sorting Layer：UI，Order in Layer：10（高于父，确保弹窗在顶层）；
- 开启 “Override Sorting”（关键！否则子 Canvas 会继承父的 Order）；
- 向其中添加弹窗 UI（如按钮、输入框）。
步骤 3：优化事件检测
- 父 Canvas 的 Graphic Raycaster：取消 “Ignore Reversed Graphics”，仅检测静态 UI；
- 子 Canvas 的 Graphic Raycaster：单独控制弹窗的点击事件，避免父 Canvas 的事件干扰。
四、避坑指南（常见问题与解决方案）
1. 子 Canvas 内容不显示 / 被遮挡
- ❌ 原因 1：子 Canvas 未开启 “Override Sorting”，Order 继承父 Canvas 导致层级过低；
- ✅ 解决：勾选子 Canvas 的 “Override Sorting”，设置更高的 Order in Layer；
- ❌ 原因 2：子 Canvas 的 Render Mode 为 World Space，但 RectTransform 的尺寸 / 位置错误；
- ✅ 解决：调整子 Canvas 的 RectTransform（设置宽高、锚点），确保在相机视野内。
2. 嵌套 Canvas 导致适配异常
- ❌ 原因：子 Canvas 继承了父的缩放模式，但需要独立适配；
- ✅ 解决：子 Canvas 手动修改 “UI Scale Mode”（如父为 Scale With Screen Size，子设为 Constant Pixel Size）；
- ❌ 原因：父 Canvas 的 Canvas Scaler 影响子 Canvas 的子元素；
- ✅ 解决：子 Canvas 添加独立的 Canvas Scaler 组件（覆盖父的缩放规则）。
3. 性能问题（DrawCall 过高）
- ❌ 原因：过度嵌套 Canvas（如每个按钮都套一个 Canvas）；
- ✅ 解决：
- 仅对 “独立渲染 / 适配” 的 UI 分区创建子 Canvas；
- 合并相同渲染规则的 Canvas（如所有弹窗共用一个子 Canvas）；
- 开启 Canvas 的 “Static” 标记（静态 UI 的 Canvas，减少批次更新）。
4. 事件穿透 / 点击无响应
- ❌ 原因 1：子 Canvas 的 Graphic Raycaster 未启用，或父 Canvas 的 Raycaster 屏蔽了子 Canvas；
- ✅ 解决：确保子 Canvas 的 Graphic Raycaster 启用，且 “Blocking Objects” 设置正确；
- ❌ 原因 2：子 Canvas 的 RectTransform 超出父 Canvas 的范围，被裁剪；
- ✅ 解决：取消父 Canvas 的 “Mask” 组件（如需裁剪，用 RectMask2D 而非父 Canvas 裁剪）。
五、总结
嵌套 Canvas 的核心原则是：仅在需要独立控制渲染、适配、层级时使用，避免无意义的嵌套。合理的嵌套能提升 UI 的可控性和性能，而过度嵌套会导致层级混乱、DrawCall 飙升。