UE5 - 控件蓝图使用详解13（动态创建、添加、删除子控件）

作者：hangge | 2025-12-26 08:31

在用户界面（UI）开发中，很多时候我们需要根据运行时的逻辑动态生成子控件（Widget）并将其加入到父容器中。本文通过一个文本显示器案例演示如何实现该功能，文本显示器会根据数组中的元素数量，动态创建子控件并显示在主控件上。

（1）在“内容浏览器”面板中新建一个“用户控件”控件蓝图并命名为“UI_SingleText”。打开“UI_SingleText”控件蓝图，将“控制板”面板中的“文本”子控件拖曳到“层级”面板中。

（2）在“细节”面板中勾选“自动包裹文本”选项，设置“包裹规则”为“允许逐字符包裹”，勾选“是变量”选项后变量中会多出子控件的变量。

（3）进入“事件图表”面板，使用“事件构造”节点连接“设置文本（文本）”节点，并将“文本”子控件连接到“目标”引脚。使用鼠标右键单击“In Text”引脚并执行“提升为变量”菜单命令。

（4）选择生成变量，在“细节”面板中勾选“可编辑实例”与“生成时公开”选项。

（1）在“内容浏览器”面板中新建一个“用户控件”控件蓝图并命名为“UI_MainBrowser”然后打开。在“控制板”面板中添加一个“画布面板”到“层级”面板中，在添加一个“滚动框”子控件到“画布面板”中

（2）在“细节”面板中设置“滚动框”子控件“锚点”为全屏幕，调整滚动框在画板中的位置与尺寸。

（3）选中滚动框，勾选“是变量”选项。

（4）在“我的蓝图”面板中新建一个变量，在“细节”面板中设置“变量命名”为“Texts”，“变量类型”为“文本”数组

（5）最后添加如下逻辑：

使用“For Each Loop”节点遍历“Texts”变量并将其连接到“事件构造”节点上。
创建“创建控件”节点，设置“Class”为“UI Single Text”，此时节点会公开“In Text” 引脚，直接将其连接到“Array Element”引脚上。
创建“添加子项”节点，连接“目标”引脚到滚动框变量上，连接“Content”引脚到“Return Value”引脚上。

（1）选择“Texts”变量，在“默认值”卷展栏中新建几个元素并输入文本。

（2）打开“关卡蓝图”窗口，创建“创建控件”节点与“添加到视口”节点，设置“Class”为“UI Main Browser”

（3）编译并保存后进入 PIE 运行模式，可以看到文本会显示在屏幕中。

附：动态删除子控件

（1）如果我们只是想删光所有子项，最简单也是性能最好的办法就是使用“Clear Children”节点，并且该方式没有任何索引偏移的问题。

（2）编译并保存后进入 PIE 运行模式，可以看到文本再显示完毕 5 秒后便会全部清除。

（1）下面我们通过“Reverse for Each Loop”节点遍历所有子节点，然后只删除前三个节点。

提示：这里使用“Reverse for Each Loop”节点反向遍历，而不是“For Each Loop”节点，是由于使用“For Each Loop”边遍历边删除会导致索引错位问题。假设初始列表：[A, B, C, D, E]：

第一次循环，RemoveChild（A) → 剩下 [B, C, D, E]
第二次循环，此时 ForEach 会处理原数组里的第二个元素 B，但因为纯节点“Get All Children”在每次拉数据时都会重新去查当前的子项，或者如果蓝图内部对数组做了动态更新，RemoveChild 已经把 B 当下标 0 的位置移过来，实际删除就成了当前的下标 1 的 C
最终等同于删除索引 0、1、2（原始 0,2,4），剩下原始索引 1、3 的 B、D

（2）编译并保存后进入 PIE 运行模式，可以看到文本再显示完毕 5 秒后前三行文字会被清除。