2、Widget蓝图入门：创建第一个Widget蓝图、常用控件介绍、画布与锚点系统
好，咱们正式开始动手了。
上一章我们聊了UI架构的整体思路，这一章就直接进编辑器干活。我个人觉得，Widget蓝图是Unreal里最容易被低估的系统——很多人觉得它就是个拖拖拽拽的界面工具，其实它的设计理念非常讲究。你想想看，一个游戏里成百上千的UI元素，怎么保证在不同分辨率下都不乱套？怎么让按钮、图片、文字各司其职？答案就在这一章里。
2.1 创建你的第一个Widget蓝图
在Content Browser里右键，选「User Interface」→「Widget Blueprint」。命名时我建议用WBP_前缀，比如WBP_MainMenu。这不是强制规定，但团队协作时一眼就能认出这是Widget蓝图，省去很多沟通成本。
双击打开，你会看到三个主要区域：
- Designer（设计器）：可视化编辑界面，拖控件、调布局都在这里
- Graph（图表）：蓝图脚本区域，处理交互逻辑
- Details（细节面板）：选中控件后调整属性
Ctrl+S保存，然后立刻在Details面板里把「Size to Content」勾上。为什么？因为默认的尺寸是全屏，你拖个小按钮进去它还是占满整个屏幕，调试起来很别扭。先让它自适应内容大小，后面再根据需求调整。
在Designer里拖一个Button进来，再拖一个Text Block放到Button上。选中Text Block，在Details里把Text改成「点击我」。好了，你的第一个Widget蓝图已经完成了——虽然它什么都还没做。
2.2 常用控件介绍
Unreal提供了几十种控件，但实际项目中常用的就那么十来个。我按使用频率给你排个序：
| 控件名称 | 用途 | 我的经验 |
|---|---|---|
Canvas Panel |
绝对定位布局容器 | 几乎所有UI的根容器，锚点系统的基础 |
Horizontal/Vertical Box |
水平/垂直自动排列 | 做列表、按钮组时首选，省去手动对齐的麻烦 |
Overlay |
层叠布局 | 做弹窗、提示框时特别好用 |
Image |
显示图片或材质 | 记得设置Brush，否则默认是白色方块 |
Text Block |
显示文字 | 字体、字号、颜色都在Details里调 |
Button |
可点击交互 | 默认样式很丑，一般要自定义 |
Progress Bar |
进度条 | 血条、加载条都用它 |
Scroll Box |
可滚动区域 | 做长列表时必备，注意性能 |
重点提醒：不要一上来就用Canvas Panel包一切。Canvas虽然灵活，但嵌套多了性能会下降，而且布局维护起来很痛苦。能用Box、Overlay解决的，就别用Canvas。我在项目里见过一个界面嵌套了7层Canvas，改一个按钮位置要调十几个锚点——那场面，简直灾难。
2.3 画布与锚点系统
锚点系统，说白了就是告诉控件「你该贴在父容器的哪个位置」。这是Unreal UI自适应布局的核心，也是很多新手翻车的地方。
选中一个控件，在Designer右上角你会看到一个锚点图标。点击它，会弹出锚点预设面板：
- 左上角锚点：控件固定在左上角，窗口缩放时它不动
- 居中锚点：控件始终保持在屏幕中心
- 拉伸锚点：控件会随着父容器缩放而拉伸
- 自定义锚点：你可以手动拖拽锚点到任意位置
举个例子。假设你要做一个血条，它应该固定在屏幕顶部居中。那你就把锚点设为「Top Center」，然后设置Position X为0。这样无论屏幕是1920x1080还是1280x720，血条始终在顶部中间。
我曾经踩过的坑：做多分辨率适配时，我直接把所有控件都用绝对定位（锚点固定在左上角）。结果在4K屏上测试，UI全挤在左上角一小块区域，按钮都点不到。后来老老实实把锚点系统学了一遍，才明白「锚点+边距」才是正道。
锚点的工作原理其实很简单：
- Position X/Y：控件相对于锚点的偏移量
- Alignment X/Y：控件自身的对齐点（0是左/上，1是右/下，0.5是居中）
- Size X/Y：控件的宽高
举个例子，如果你想让一个按钮始终在屏幕右下角，距离边缘20像素：
- 把锚点设为右下角
- 设置Position X = -20, Position Y = -20
- Alignment保持默认(0,0)
这样按钮就会固定在右下角，而且距离边缘始终20像素。
调试技巧：在Designer里，你可以用右上角的「Preview」下拉菜单切换不同分辨率。我习惯在1920x1080、1280x720、2560x1440三个分辨率下都看一眼，确保布局没崩。如果某个控件在某个分辨率下跑偏了，八成是锚点设置有问题。
2.4 实战：做一个自适应的登录界面
光说不练假把式。咱们用刚学的知识，做一个简单的登录界面：
- 创建一个新的Widget蓝图，命名为
WBP_Login - 根节点用Canvas Panel
- 拖一个Image作为背景图，锚点设为全屏拉伸（四个角都对齐到父容器边缘）
- 拖一个Vertical Box放在屏幕中央，锚点设为居中
- 在Vertical Box里依次放入：Logo图片、用户名输入框、密码输入框、登录按钮
- 每个子控件设置合适的边距（Padding），让它们之间留出间距
这样做的优势很明显：
- 背景图自动适应任何分辨率
- 整个登录框始终居中
- 内部元素自动垂直排列，增减控件也不影响布局
嗯，这里要注意一点：输入框在Unreal里叫Editable Text Box，别找成Text Block了。我第一次做登录界面时就搞混了，调试了半天发现文字输不进去——原来拖了个只读文本控件。
好了，这一章的内容就到这里。你学会了创建Widget蓝图、认识了常用控件、理解了锚点系统。下一章我们会深入控件的交互逻辑，让按钮真正「动」起来。
课后练习：试着做一个游戏暂停菜单，包含「继续游戏」「返回主菜单」「退出游戏」三个按钮。要求：菜单居中显示，按钮垂直排列，每个按钮之间有20像素间距。提示：用Vertical Box + 锚点居中。
公众号:蓝海资料掘金营，微信deep3321