任务20：tree组件的学习和基本使用

一、任务目标

Tree组件作为一个父容器，用于创建具有层级关系的目录，例如经典的文件夹案例，在游戏中的应用多为多层商店或者多层活动中使用，当然如果活动较少利用Tab组件也是非常方便的，该任务我们学校tree组件的基本使用。

二、任务分解

2.1 认识Tree组件基本的层级关系

如图所示，在官方的介绍中，Tree组件下我们只需要将对应的组件改成他们规定的命名，就可以自动识别。

• Tree组件的子容器是Box容器，在Box容器中我们才是装其他基本组件
• 三角图片，点击变化状态，将一个Clip组件命名为arrow就会自动识别，Clip的皮肤可以替换，但是命名不能变
• 文件夹图片，点击变成打开状态，将一个Clip组件命名为folder就会自动识别
• label同上，将一个Label组件命名为label就会自动识别
• selectBox同上，将一个Clip命名为selectBox就会自动识别为背景，这里需要注意的是调节selectBox的层级关系，让他在最下层显示，否则会遮挡住文件夹和label，selectBox实现的效果就是鼠标滑到上面时变成selectBox的颜色
• Box容器制作一个，拖动Tree容器的大小就会自动增加Box的渲染数量，但是Box的渲染模式renderType要选为render，这点和之前讲过的List和Box的组合使用类似

2.2 组装xml信息

Tree组件中每个label的信息是通过xml来解析的，我们看一下他的数据格式。

let treeData: string = "<data>";
            for (let i: number = 0; i < 5; ++i) {
   
                treeData += "<item label='Directory " + (i + 1) + "' isOpen='false'>";
                for (let j: number = 0; j < 3; ++j) {
   
                    treeData