【UE5】控件蓝图——树视图(TreeView)的基本使用

devtools/2024/11/19 13:38:46/

目录

前言

效果

步骤

一、显示根节点 

二、显示子节点


前言

我们在视口中添加1个方块,2个球体,5个圆柱

它们在大纲视图中的层级关系如下,那么如何将这种层级关系显示在树视图中是本篇文章要解决的问题。

效果

步骤

一、显示根节点 

1. 新建一个控件蓝图,这里命名为“WBP_TreeView”

打开“WBP_TreeView”,添加树视图控件

此时编译会报错,这是因为我们还没有指定条目控件类

2. 创建一个控件蓝图,这里命名为“WBP_Item”,作为条目控件类

打开“WBP_Item”,添加如下控件

在类设置中添加一个系统自带的蓝图接口“UserObjectListEntry”

3. 新建一个蓝图,父类为Object,命名为“Item”

打开“Item”,添加如下4个变量,其中“Depth”表示树视图的深度(这里包括根节点有3层因此Depth为2);“Child”表示根节点所包括的所有子节点,“Actor”表示根节点本身指代的Actor

4. 回到“WBP_Item”中,添加如下节点

5. 回到“WBP_TreeView”中,设置条目控件类为“WBP_Item”,此时可以看到树视图中有5个条目

在选中树视图控件后点击“创建绑定”

6. 回到“WBP_TreeView”中,在事件图表中添加如下节点,表示在树视图控件构建的时候获取场景中的静态网格体Cube,然后构建游戏对象“Item”,将Cube传入“Item”,最后将Item作为根节点添加到树视图中。

7. 在关卡蓝图中将控件显示出来

此时运行可以看到已经在树视图中显示了根节点

二、显示子节点

1. 打开“WBP_TreeView”,添加一个新函数,这里命名为“F_ActorRecursion”,表示对所有子节点所包括的Actor及这些Actor包括的所有子项进行递归

该函数添加如下两个输入

函数内容如下

在事件图表中调用函数“F_ActorRecursion”

之前我们已经为树视图创建了绑定函数,只要点击了树视图的节点时就会执行该函数。

在绑定函数“OnBP_OnGetItemChildren”中添加如下节点,表示点击了节点后来获取该节点的所有后代

2. 打开“WBP_Item”,给文本控件包裹一个水平框,然后添加间隔区

设置水平框靠左

将间隔区公开为变量

在事件图表中,当设置条目的名字时添加如下节点,根据条目所处的节点深度来设置间隔区的尺寸。

最终运行效果如下

参考视频:

UE5教程:UMG列表:树视图(TreeView)


http://www.ppmy.cn/devtools/104724.html

相关文章

学习大数据DAY43 Sqoop 安装,配置环境和使用

目录 sqoop 安装 配置 mysql sqoop 安装 sqoop 指令集 sqoop 使用 sqoop 创建 hive 表 sqoop 全量导入表 sqoop 增量导入表 sqoop 全量导出表 sqoop 分区表导入表 sqoop 分区表导出表 上机练习 sqoop 安装 配置 mysql create database test DEFAULT CHARACTER S…

WHAT - 通过 react-use 源码学习 React(Lifecycles 篇)

目录 一、官方介绍1. Sensors2. UI3. Animations4. Side-Effects5. Lifecycles6. State7. Miscellaneous 二、源码学习示例:n. xx - yyLifecycles - useEffectOnceLifecycles - useEventLifecycles - useLifecyclesLifecycles - useMountedState & useUnmountPr…

linux 9系统分区扩容

1.可以看到我的是9.2的系统,系统分区:/dev/mapper/rl-root 83G 8.0G 75G 10% / 2.接下来,我们新增一块新的硬盘,而不是直接对这个硬盘的基础上再扩容。 关机,加30G硬盘,再开机 fdisk -l fdisk /dev/…

APP、小程序对接聚合广告平台需要提供哪些资料?

开发者通过广告变现获得稳定的收益,通过在应用中展示广告获得收益,而广告商则能够在广告中获得曝光和用户互动。 开发者接入聚合广告SDK可以对接聚合广告平台,开发者可以按照提供的iOS/Android SDK 接入文档,完成对接。对接主要分…

用友U8接口-自定义项和扩展自定义项(6)

概括 本文的操作需要正确部署U8API保存单据时传入自定义项和扩展自定义项 单据自定义项 ERP界面 接口参数 自定义项为标准erp字段,以cDefine开始的字段对应接口传入参数位置 [{"Inum": "OtherIn","Data": {"iHead": {&…

比较一下React与Vue

React和Vue都是现代前端开发中广泛使用的JavaScript库,它们各自具有独特的特点和优势。以下是对React和Vue的比较: 1. 开发模式和范式 React: 本质是一个前端组件框架,由后端组件演化而来。 鼓励将UI分解为小的、独立的、可复用…

netcore高级知识点,内存对齐,原理与示例

最近几年一直从事物联网开发,与硬件打交道越来越多,发现越接近底层开发对性能的追求越高,毕竟硬件资源相对上层应用来实在是太缺乏了。今天想和大家一起分享关于C#中的内存对齐,希望通过理解和优化内存对齐,可以帮助大…

【GPT】Coze使用开放平台接口-【7】Dify 比较篇

个人主观,轻喷,没有什么绝对,只是相对 持续更新 用下来的感受是 coze 用于社交,dify 用来内部构建。抛开工作流,机器人,工具,coze 最大的区别在于可以直接发布到社交媒体上。所以,co…