锚点 Anchor 与 Rect Transform

🎯本节学习目标

• 理解锚点概念
• 掌握锚点设置
• 掌握 RectTransform 定位

🚀课程导读

UI 元素“贴屏幕哪个位置”由锚点决定：左上角、右上角、居中、拉伸全屏。本课把 UI 定位彻底讲懂。

◆锚点 Anchor

UI 的“挂钩”。

1. 【RectTransform】UI 元素都有 RectTransform（代替 Transform），包含 Position、Size、Anchor、Pivot。
2. 【锚点 Anchor】决定 UI 相对父对象（通常是 Canvas）的“挂钩位置”。
3. 选中 UI 元素，Inspector 的 RectTransform 左上角有一个【Anchor Preset】九宫格图标。
4. 点击它弹出预设：左上、右上、左下、右下、居中、拉伸等。
5. 【效果】锚点=左上时，UI 固定在屏幕左上角，屏幕变大它跟着左上走。
6. 【拉伸】选择“拉伸”预设（四条线撑满），UI 随屏幕缩放填满。
7. 【锚点中心】点 Preset 右下角小图标可同时设置 Pivot。
8. 【实战】把“开始按钮”锚点设为“中下”，让它在屏幕底部居中。

◆RectTransform 与 Pivot

定位与缩放的基准点。

1. 【Pos X/Y】相对锚点的位置（如中下锚点+PosY=50 → 底部上方 50）。
2. 【Width/Height】UI 的宽高。
3. 【Pivot 轴心】旋转/缩放的基准点（0,0=左下，0.5,0.5=中心，1,1=右上）。
4. 改 Pivot 影响位置显示与缩放行为（如血条从左边涨就设 Pivot.x=0）。
5. 【常用】文本/血条 Pivot.x=0（从左开始）、按钮中心 0.5。
6. 【对齐】锚点+位置组合实现“屏幕角落”“居中”等。
7. 【工具】Inspector 的 Rect 工具（工具栏 T 键）可在场景里拖动调整 UI 大小。
8. 【全屏】锚点拉伸预设 + 四角 0 → UI 铺满屏幕。
9. 【注意】Canvas 的 RectTransform 决定“参考区域”，子 UI 锚点相对它。

⚠常见错误与排查

★动手练习

✓本节小结

锚点与 RectTransform 已掌握。下一课系统讲 UI 自适应屏幕。