Panel

Panel 本质上不是一种特殊组件，而是一个带有 Image 组件的 UI GameObject，通常用于背景、窗口、弹窗和 UI 容器。

1. 截图中的 Panel 结构

这个 Panel 通常包含：

• Rect Transform：控制位置、尺寸和锚点。
• Canvas Renderer：负责提交 UI 几何体。
• Image：显示面板背景 Sprite。

Panel 本身不会自动排列子物体。如果需要自动排列按钮、文本或列表，需要额外添加：

• Vertical Layout Group
• Horizontal Layout Group
• Grid Layout Group
• Content Size Fitter

2. Rect Transform

截图中锚点为：

Anchor Min = (0, 0)
Anchor Max = (1, 1)

这表示 Panel 的四个边分别跟随父级的四条边，也就是：

Stretch / Stretch

同时：

Left   = 0
Right  = 0
Top    = 0
Bottom = 0

表示四条边都没有偏移，因此 Panel 会刚好填满父级。

这种配置非常适合制作：

• 全屏背景
• 暗色遮罩
• 暂停菜单背景
• 弹窗面板
• UI 页面根容器

在 Stretch 模式下，Inspector 显示的是 Left / Right / Top / Bottom，而不是普通的 Width / Height。

其他字段：

• Pivot 0.5, 0.5：围绕中心旋转和缩放。
• Position Z = 0：没有额外深度偏移。
• Rotation = 0：没有旋转。
• Scale = 1,1,1：不额外缩放。

3. Canvas Renderer

Canvas Renderer 是 UI 的底层渲染组件，通常不需要手动修改。

截图中的：

Cull Transparent Mesh

表示当 UI 完全透明时，可以忽略这部分几何体，减少无意义的绘制。通常保持勾选即可。

4. Image 组件

Source Image

截图中的资源是：

Background

它是一个 Sprite，通常是 Unity 默认的 UI 背景 Sprite。

Image 的 Source Image 必须使用 Sprite 资源。普通图片需要在导入设置中选择：

Texture Type = Sprite (2D and UI)

Color

当前为白色。

白色表示保留 Sprite 原始颜色。如果修改颜色，会与 Sprite 颜色相乘：

• 白色：保持原色。
• 黑色：变成黑色。
• Alpha 降低：面板变透明。

Material

截图中为：

None (Material)

表示使用默认 UI 材质，底部可以看到：

Shader = UI/Default

如果需要描边、特殊混合、灰度或自定义 Shader，可以创建 Material 后赋给这个字段。

Raycast Target

截图中已勾选。

这表示 Panel 会参与 UI 射线检测，可能挡住后面的按钮。

如果 Panel 只是装饰性背景，建议关闭：

Raycast Target = Off

如果 Panel 需要接收点击、拖拽或作为遮罩层，则可以保持开启。

Raycast Padding

这是点击判定区域的额外调整值。它只影响“点击检测范围”，不会改变 Panel 的实际显示大小。

Maskable

截图中已勾选。

表示这个 Image 可以被父级的：

• Mask
• Rect Mask 2D

进行裁剪。

5. Image Type

截图当前为：

Image Type = Sliced

Unity Image 主要有四种显示类型。Unity Image 官方手册

Simple

整体缩放 Sprite。

适合：

• 图标
• 普通图片
• 不需要保护边角的背景

Sliced

使用九宫格技术显示 Sprite。

它会将图片分成九个区域：

• 四个角保持原始大小。
• 四条边可以拉伸。
• 中心区域负责填充。

适合：

• 面板
• 按钮背景
• 对话框
• 弹窗
• 圆角背景

截图中的 Panel 使用的正是这种模式。

Tiled

重复平铺 Sprite 的中心区域。

适合：

• 纹理背景
• 重复装饰
• 网格图案
• 可无限延伸的背景

Filled

按照一定方向和比例显示 Sprite 的一部分。

常见设置包括：

• Horizontal：水平填充。
• Vertical：垂直填充。
• Radial 90：四分之一圆。
• Radial 180：半圆。
• Radial 360：整圆。
• Fill Amount：填充比例。
• Clockwise：是否顺时针填充。

适合：

• 血条
• 经验条
• 技能冷却
• 圆形进度条
• 加载进度

6. Fill Center

截图中：

Fill Center = On

表示九宫格的中心区域也要进行填充。

如果关闭，面板四周可能仍然显示，但中间区域会变成透明。

对于普通面板背景，通常保持开启。

7. Pixels Per Unit Multiplier

截图中的值是：

1

它影响 Sprite 像素与 UI 单位之间的密度关系。

通常保持为 1。只有在出现以下情况时才考虑调整：

• 面板边框厚度不合适。
• 平铺密度不对。
• 像素风 UI 显示比例异常。

8. 九宫格的前置设置

要让 Sliced 正常工作，Sprite 必须设置 Border。

操作步骤：

1. 选中 Project 中的图片。
2. 设置 Texture Type = Sprite (2D and UI)。
3. 点击 Sprite Editor。
4. 在 Sprite Editor 中调整左、右、上、下边界。
5. 点击 Apply。
6. 回到 Panel，将 Image Type 设置为 Sliced。

如果没有设置 Border，四角仍然可能被拉伸。Unity 官方对九宫格的说明见：9-slicing 与 Sprite 文档。

9. 代码控制 Panel

using UnityEngine;
using UnityEngine.UI;

public class PanelDemo : MonoBehaviour
{
    [SerializeField] private Image panelImage;

    private void Start()
    {
        panelImage.type = Image.Type.Sliced;
        panelImage.fillCenter = true;
        panelImage.color = new Color(1f, 1f, 1f, 0.85f);
    }
}

控制血条或进度条：

using UnityEngine.UI;

public class HealthBar : MonoBehaviour
{
    [SerializeField] private Image healthImage;
    [SerializeField] private float currentHealth = 70f;
    [SerializeField] private float maxHealth = 100f;

    private void Start()
    {
        healthImage.type = Image.Type.Filled;
        healthImage.fillMethod = Image.FillMethod.Horizontal;
        healthImage.fillAmount = currentHealth / maxHealth;
    }
}

10. 常见问题

Panel 不显示：

• Source Image 为空。
• Color 的 Alpha 为 0。
• GameObject 没有启用。
• 被父级 Mask 裁剪。
• Canvas 层级或渲染顺序不正确。

Panel 四角变形：

• Image Type 不是 Sliced。
• Sprite 没有设置 Border。
• 使用了错误的 Source Image。

按钮点不到：

• Panel 的 Raycast Target 挡住了按钮。
• Canvas 缺少 Graphic Raycaster。
• 场景中缺少 EventSystem。

Panel 铺不满父级：

Anchor Min = (0, 0)
Anchor Max = (1, 1)
Left = 0
Right = 0
Top = 0
Bottom = 0

一句话记忆：

Panel 管背景和层级，Rect Transform 管铺多大，Image Type = Sliced 管拉伸时四角不变形。