UE5 - 控件蓝图使用详解8（水平框、垂直框的使用）

作者：hangge | 2025-12-20 10:41

在 Unreal Engine 5（UE5）中，水平框（Horizontal Box）与垂直框（Vertical Box）是最常用的布局容器，能够自动为子控件分配空间，便于实现响应式、动态排版。本文通过样例演示水平框的属性和使用方法，而垂直框与水平框类似，只不过排版的方向不一样，这里就不再赘述了。

八、水平框、垂直框的使用

（1）从控件库中搜索并找到“水平框”，将其拖动到“画布面板”中。在细节面板中将 SizeX 和 SizeY 分别改为 300 和 100

（2）往“水平框”种添加 3 个“图像”组件，为了对它们进行区分，我们将三个图像组件设置为三种不同颜色。可以看到，作为“水平框”的子控件，这些图像控件的大小已经不能由自己直接控制了。Size 变成了只有两个选项“自动”和“填充”。

默认子控件使用“自动”模式，“水平框”会使用子控件的“默认宽度”。控件的默认宽度根据不同的控件，会有不同的值。对于图片控件来说，控件的默认宽度会等于纹理的宽度。

（1）我们将三个图像控件都设置为“填充”模式，此时“水平框”会将剩下的“可分配的” 宽度进行按比例平分（默认模式下每个子控件的“填充”占比为 1）。划分给这些“填充”模式的子控件。

（2）如果我们想把某个图像控件的宽度调得大一点，我们可以选中那个图像，把旁边的占比改大。

比如，我们把最后一个图像组件的比例改成 2，这样三个图像组件的比例就变成 1:1:2，此时“水平框”的 300 像素宽度会平分成 4 分，前两个图像组件各占一份，最后一个图像组件占 2 份，此时的最后一个图像组件宽度就会是前两个组件的二分之一。

（1）为了能够直观地设置子控件的宽度，我们可以使用“尺寸框”SizeBox 控件。使用了“尺寸框”，就可以让子控件和在“画布面板”中一样，直接设置子控件的大小占多少像素，并且覆盖“水平框”对它的大小控制。

（2）我们可以从控件库中搜寻并找到“尺寸框”，将它拖动到“水平框”中成为它的子控件。当然还要更简单的方法，就是右击一个图像控件，在弹出的右键菜单中，可以找到“包裹”选项，选择“尺寸框”子项。

（3）这时候再看左下角的控件树，会发现图像控件被“尺寸框”控件包裹住了。选中这个“图像”控件，在细节面板中设置它的“水平对齐”和“垂直对齐”为最后一个，表示子控件横向和纵向上都填满父控件。

（4）选中这个“尺寸框”，在细节面板中可以看到有一个选项叫“子布局”，其中比较常用的就有：

（5）我们这个“尺寸框”设置为“自动”模式，“宽度重载”设置为 200。这样“水平框”可支配宽度变成了 300-200=100，其他两个图像控件平分这 100 像素，每个图像控件各占大约 50 个像素。