UE 树形图(Tree View)_1

一.树形图介绍

1.所需类型

(1)TreeView控件:作为树形图主体,后面简称树形图

(2)EntryWidget:本质是一个UserWidget,作为树形图中的子元素存在,必须要实现UserObjectListEntry接口,否则无法作为树形图的子元素.后面简称Entry

(3)TreeViewItem:EntryWidget对应的信息or实体,基类为UObject,后面简称Item

2.三者关系

(1)关系图

(2)对应关系建立方式

①上面三个类型是通过树形图来实现对应关系的,通过在树形图控件的EntryWidgetClass属性,将树形图和Entry 关联

②树形图通过AddItem来与Item建立联系,每添加一个Item就会在UI层面生成一个EntryWidgetClass的实例Entry

二.准备素材

1.分别创建树形图(UserWidget),Entry(UserWidget),Item(UObject)

①Entry添加一个Text控件

classSettings中添加UserObjectListEntry接口,并实现OnListItemObjectSet接口函数

当Entry被创建之后,EventOnListItemObjectSet会被触发,与之对应的Item会被返回出来

②TreeView添加一个TreeView控件

需要指定一个EntryWidgetClass,否则会报错

为OnGetItemChildren创建绑定

每当树形图AddItem之后,该函数会被触发,添加的Item会被传入这个函数

③Item暂时不做处理

2.执行流程

(1)手动调用AddItem:将创建好的Item对象作为参数传入树形图的AddItem函数中

(2)树形图的OnBp_OnGetItemChildren回调函数会自动触发,将第一步传入的Item返回出来

(3)前两步执行完成之后,树形图会在内部为Item创建一个对应的Entry,然后Entry的EventOnListItemObjectSet会被自动调用,并且会将其对应的Item返回出来

执行流程如下图:

3.简易版树形图制作流程

(1)Item

①添加以下属性

ItemName:名称,用于在树形图中显示

Level:层级级别,用于在树形图中表示层级关系,如下图红黄绿分别属于三个层级

children:存储子级Item信息,比如上图中的Lamp中存放着四个SM_Lamp_Ceiling子Item

NumberOfChildren:子级Item数量,此变量仅用于演示,只是为了方便讲解层级关系

②添加以下成员函数

Init:初始化自身,初始化子级

InitChildren:创建N个子级Item,子级Item再初始化自身

防止看不清,分开截图:

(2)Entry

将Item数据显示

(3)TreeView

树形图会为Item的Children Item也创建各自的Entry

4.测试

至此最基础的树形图功能完成了,进阶内容待续