UE5 小部件 组合框（键）ComboBox (Key)

楔子

最近开发一个UE平台化的功能，在运行态下，允许用户添加， 修改和删除POI点位，数据存储在一个后台的数字资产数据库中。 如下所示，其中一个功能，需要选择POI的图标（下拉框，ComboxBox），图标和名称需要同时显示，因此使用默认的ComboBox（String）达不到要求，需要使用ComboBox（Key）。如下图所示。

<!-- 这是一张图片，ocr 内容为：更新摄像头点位 2B8F8B4949B466F01CA064B7EF41 编号:: 名称*:AAA 图标: 球机 位置:X54539Y244792000 缩放: 现代中药数字作用 1.0 摄像头 名称: 西南角 地址: RTSP://ADMIN:KY2024A@ 删除 取消 保存 -->

ComboBox（Key）的相关资料不多，搜索到一篇日文的文章，下面是该文章的中文翻译（可能部分图片包括日文）

<!-- 这是一张图片，ocr 内容为： -->

关于组合框（键）

UE5引入了ComboBox(Key)功能。

由于官方文档和论坛中都没有关于其用法的说明，所以我做了一些研究。

在 ComboBox(Key) 中，您可以使用控件作为 ComboBox 项。

以下示例展示了如何使用包含图标和文本的 UserWidget 作为项。

<!-- 这是一张图片，ocr 内容为： -->

如何使用 ComboBox(Key)

这次，我们将创建一个使用 ComboBox(Key) 和 EditorUtilityWidget 的示例。

<font style="color:rgb(236, 245, 255);">资产名称</font>	<font style="color:rgb(236, 245, 255);">角色</font>
<font style="color:rgb(236, 245, 255);">EUW\_ComboBoxKey</font>	<font style="color:rgb(236, 245, 255);">EditorUtilityWidget 使用 ComboBox(Key)（也可以与 WidgetBlueprint 一起使用）</font>
<font style="color:rgb(236, 245, 255);">WBP\_ComboBoxItem</font>	<font style="color:rgb(236, 245, 255);">带有图标和文本的用户小部件（Widget）。</font>

<!-- 这是一张图片，ocr 内容为： -->

创建一个 UserWidget，用作 ComboBox 中的项（键）

首先，我们将为组合框项目创建一个 UserWidget。

右键单击“内容浏览器”>“用户界面”>“控件蓝图”

<!-- 这是一张图片，ocr 内容为： -->

该控件的配置如下图所示。

通过将 Image 设置为 ScaleBox 的子控件，它可以根据 ComboBox 项的高度进行缩放，同时保持其原始大小。

<!-- 这是一张图片，ocr 内容为： -->

由于文本将在蓝图中更改，请启用[Is Variable]。

<!-- 这是一张图片，ocr 内容为： -->

我们将添加一个变量来改变项目的显示方式。

<font style="color:rgb(236, 245, 255);">变量名</font>	<font style="color:rgb(236, 245, 255);">变量类型</font>
<font style="color:rgb(236, 245, 255);">姓名</font>	<font style="color:rgb(236, 245, 255);">文本</font>
<font style="color:rgb(236, 245, 255);">质地</font>	<font style="color:rgb(236, 245, 255);">二维纹理</font>
<font style="color:rgb(236, 245, 255);">图片大小</font>	<font style="color:rgb(236, 245, 255);">二维矢量图</font>

<!-- 这是一张图片，ocr 内容为： -->

创建 UserWidget 时，启用以下项目以设置值。

实例可编辑

暴露在 Spawn

<!-- 这是一张图片，ocr 内容为： -->

文本和图像小部件在事件构造中设置。

<!-- 这是一张图片，ocr 内容为： -->

在“创建（结构体）”中，仅启用“详细信息”面板中要更改的变量对应的复选框。

由于我们要更改图像的大小和纹理，因此请启用“图像大小”和“图像”并设置变量。

<!-- 这是一张图片，ocr 内容为： -->

编译并保存以完成创建过程。

编译 > 保存

<!-- 这是一张图片，ocr 内容为： -->

创建一个使用 ComboBox（键）的 WidgetBlueprint。

我们将创建一个使用 ComboBox(key) 的 WidgetBlueprint。

这次，我们将使用 EditorWidgetUtility 对其进行验证。

右键单击“内容浏览器”>“编辑器实用工具”>“编辑器实用工具小部件”。

<!-- 这是一张图片，ocr 内容为： -->

在设计器中向图表添加组合框（键）。

<!-- 这是一张图片，ocr 内容为： -->

您可以设置“选项（选择项）”和“选定选项（从选择项中首先选择的项目）”。

<!-- 这是一张图片，ocr 内容为： -->

即使您在 ComboBox(Key) 中设置了选择项，Widget 中也不会显示任何内容。

<!-- 这是一张图片，ocr 内容为： -->

要在 ComboBox（键）中设置选择项或显示所选项，请实现以下事件。

<font style="color:rgb(236, 245, 255);">事件名称</font>	<font style="color:rgb(236, 245, 255);">关于</font>
<font style="color:rgb(236, 245, 255);">生成内容小部件</font>	<font style="color:rgb(236, 245, 255);">绑定进程以显示选定项目。</font>
<font style="color:rgb(236, 245, 255);">生成项目小部件</font>	<font style="color:rgb(236, 245, 255);">绑定进程以显示所选项目。</font>

<!-- 这是一张图片，ocr 内容为： -->

我们将创建一个函数，该函数绑定到“生成内容小部件”和“生成项目小部件”。

选择“创建绑定”将创建一个函数。

<!-- 这是一张图片，ocr 内容为： -->

两个已创建函数的输入和输出的变量类型相同。

项目：包含所选项目。

返回值：传递要显示的控件。

<!-- 这是一张图片，ocr 内容为： -->

由于两个函数中传递给 Item 的 VariableType 和 ReturnValue 相同，我们将创建一个函数，该函数根据所选项目创建一个 Widget。

<!-- 这是一张图片，ocr 内容为： -->

根据所选项目创建控件的蓝图函数如下：

它创建一个基于所选项目的、具有修改纹理的用户控件。

<!-- 这是一张图片，ocr 内容为： -->

要创建用户控件，请使用“从类构造对象”节点。

选择您为组合框创建的用户控件的 WidgetBlueprint 作为类。

然后，初始化变量。

<!-- 这是一张图片，ocr 内容为： -->

创建一个变量来设置图标所用图像的大小，可以简化调整过程。

<!-- 这是一张图片，ocr 内容为： -->

编译并保存以完成创建过程。

编译 > 保存

<!-- 这是一张图片，ocr 内容为： -->

当您显示该控件并在组合框中选择一个项目时，图标和文本将显示为所选项目。

<!-- 这是一张图片，ocr 内容为： -->

参考文档

https://zenn.dev/posita33/books/ue5_posilab_ue_research_and_d...

最后，关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。