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

发布于:2024-09-05 ⋅ 阅读:(106) ⋅ 点赞:(0)

目录

前言

效果

步骤

一、显示根节点 

二、显示子节点


前言

我们在视口中添加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)