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

相关推荐
远离UE41 天前
UE5 UV邻接 Niagara潜水模拟 学习笔记
ue5·uv
AA陈超2 天前
005 T03 — 角色基类与移动系统 详细功能设计文档
ue5
AA陈超2 天前
004 T02 - 俯视角摄像机系统 设计文档
网络·c++·ue5·虚幻引擎
AA陈超2 天前
006 T03 — 蓝图操作指南
c++·游戏·架构·ue5·github·虚幻引擎
Duo1J4 天前
【UE】Slate 编辑器工具开发01 - Slate语法 & 常用控件
ue5·编辑器·游戏引擎·ue4
朗迹 - 张伟5 天前
UE5.7 PCG从入门到精通系列课程【第五课:PCG沿一条样条线生成物体】
ue5·pcg
AA陈超5 天前
003 XiYou 西游 — P0 阶段实施计划
c++·笔记·学习·ue5
朗迹 - 张伟6 天前
UE5.7 PCG从入门到精通系列课程【第三课:程序化生成森林】
ue5·pcg
朗迹 - 张伟7 天前
UE5.7 PCG从入门到精通系列课程【第二课:使用PCG制作草地系统】
ue5·pcg
im长街7 天前
UE 课程介绍 - 1. 3DMax软件建模基础
ue5·3dsmax