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

楔子

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

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

关于组合框(键)

UE5引入了ComboBox(Key)功能。

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

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

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

如何使用 ComboBox(Key)

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

资产名称 角色
EUW_ComboBoxKey EditorUtilityWidget 使用 ComboBox(Key)(也可以与 WidgetBlueprint 一起使用)
WBP_ComboBoxItem 带有图标和文本的用户小部件(Widget)。

创建一个 UserWidget,用作 ComboBox 中的项(键)

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

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

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

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

由于文本将在蓝图中更改,请启用Is Variable

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

变量名 变量类型
姓名 文本
质地 二维纹理
图片大小 二维矢量图

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

实例可编辑

暴露在 Spawn

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

在"创建(结构体)"中,仅启用"详细信息"面板中要更改的变量对应的复选框。

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

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

编译 > 保存

创建一个使用 ComboBox(键)的 WidgetBlueprint。

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

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

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

在设计器中向图表添加组合框(键)。

您可以设置"选项(选择项)"和"选定选项(从选择项中首先选择的项目)"。

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

要在 ComboBox(键)中设置选择项或显示所选项,请实现以下事件。

事件名称 关于
生成内容小部件 绑定进程以显示选定项目。
生成项目小部件 绑定进程以显示所选项目。

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

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

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

项目:包含所选项目。

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

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

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

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

要创建用户控件,请使用"从类构造对象"节点。

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

然后,初始化变量。

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

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

编译 > 保存

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

参考文档

https://zenn.dev/posita33/books/ue5_posilab_ue_research_and_development/viewer/category_330_combobox_key

相关推荐
远离UE42 天前
UE5 母材质 编写笔记
笔记·ue5·材质
远离UE42 天前
UE5 HLSLTranslator 与 ShaderCompiler
ue5
1204157137 肖哥3 天前
UE5.7 场景打光管线流程_【雪山】
ue5
weixin_404679313 天前
虚幻5 替代小白人角色的完整逻辑
ue5
1204157137 肖哥6 天前
UE5.7 灯光详解
ue5
狂云歌7 天前
AI写UE的3Dgame
人工智能·3d·ue5·游戏程序
日月云棠11 天前
UE5源码分析之Editor——Blutility模块全面分析
ue5
日月云棠11 天前
UE5源码分析之Editor——BehaviorTreeEditor模块全面分析
ue5
日月云棠11 天前
UE5源码分析之Editor——AssetTagsEditor模块全面分析
ue5
远离UE412 天前
UE5 显存 虚拟内存 深入学习笔记
笔记·学习·ue5