UE4-（UI）第七十三课Tree View树形结构

一、Tile View需要提供树形结构数据，TreeView 和Tile View 都是继承自List View。

二、创建方法，与ListView创建方法一致，需要TreeEntry控件蓝图实现接口UserObjectListEntry，需要TreeItem基于Object的蓝图类。与Test用来显示UI到显示器中的控件蓝图。

区别：1.在TreeEntry中添加水平盒并放置Text（用于后面不同层级显示不同的缩进效果），水平盒选择根据内容大小自动调节大小

2.TreeItem蓝图中声明一个整数型变量。

三、详细操作流程：

1.应用UserObjectListEntry接口后，在Test控件蓝图中，选择创建TreeView控件，并将细节面板中的EntryWidgetClass选择TreeEntry

2.因为是树形结构，在一层下面有第二层，第二层具体的结构下面还有第三层。想要实现这个效果，需要有数据的填入，

所以在TreeItem中增加变量类型为TreeItem类型的数组变量，命名为Children。

3.先实现第一层逻辑：

在TreeItem蓝图在创建函数 名称为InitChildren，当变量生成后调用init方法进行对数据的填充，双击函数进入到函数内，创建局部变量Base，

实现逻辑：id值*10赋值给base变量，利用forloop节点循环从0-9，取值后与base相加，从而得到新值，添加到Children数组中。(如果想要实现树形展开根据不同的层级出现不同的首行缩进效果，可以在TreeItem蓝图类中声明一个用来传递层级的变量Level)

并将id与level设置为公共变量并且可以在生成时设置

蓝图逻辑：

4.在TreeEntry控件蓝图面板，使用OnListItemObjectSet事件节点实现当创建控件时，就要将对应的值设置到UI面板中。并且根据第几层控制水平盒中的Text控件的左侧留白。

注意：SetPadding时将Padding 分割脚本就可以出现设置四个方向上的留白属性

5.在Test 控件蓝图中创建InitTreeData函数，并使用Construct事件节点调用

在初始化函数中，根据类生成对象，选择TreeItem，并且将获取到的数据添加到TreeView中，并且调用InitChildren初始化数据

注意：id的值为1，否则后面id*int的方法结果始终为0；

调用InitChildren函数，是为了使Item中有子集可以打开第二层数据。

运行：

可以设置鼠标显示节点将鼠标显示，然后点击1，发现没有任何树结构效果。

最重要的一步：

6.在Test 蓝图控件中，选中TreeView，在细节面板的事件栏中，一定要设置OnGetItemChildren：意义为 当要获得该Item中的子元素时触发事件。

选择创建绑定事件，跳转到图表界面。根据创建的函数中传入的Item获取到该Item中存储的Children数组并将数组返回

编译运行：点击1后出现第二层

四、实现可多层点击效果

1.根据上面的流程，可知通过点击不同层的具体数字Item，获取到对应Item中的Children数组，就可以进行下一层的展开，所以要在一开始初始化InitChildren方法中，利用递归方法将多层的数据传入。

注意：使用递归可能造成死循环，甚至是一直循环下去，无法结束循环，此示例中就是循环无法终止，

因为创建一个TreeItem就要进入到TreeItem的InitChildren方法中进行再次创建该类并且初始化数据，会一直创建下去，无法结束循环，所以进行一个条件设置，当第四层以后就不在有子集。正确逻辑如下：

2.运行，点击不同数字，打开不同的树结构。