一、任务目标
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