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

最新推荐文章于 2024-06-27 00:16:07 发布

じ☆ve撒哈拉

最新推荐文章于 2024-06-27 00:16:07 发布

阅读量442

点赞数

分类专栏： LayaAir学习笔记文章标签： typescript 游戏引擎

本文链接：https://blog.youkuaiyun.com/m0_56811106/article/details/120481970

版权

LayaAir学习笔记专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了游戏引擎中Tree组件的使用，包括组件的层级关系、XML信息组装、常见代码属性设置以及如何实现文件夹效果。通过理解并实践这些内容，可以有效地在游戏场景中创建多级目录结构，例如多层商店或活动菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、任务目标

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 += "<item label='Directory " + (j + 1) + "' isOpen='false'>";
                    for(let k: number = 0; k < 2; k++){
                        treeData += "<leaf label='file" + (k+1) + "'/>";
                    }
                    treeData += "</item>";
                }
                treeData += "</item>";
            }
            treeData += "</data>";

这里为了多显示一些文件使用了for循环，分析格式不难发现Tree需要的数据是包裹在<data>大标签中，然后是<item>标签，表示文件夹，在每个文件夹中包裹<leaf>标签表示文件。

label属性表示文件或文件夹的名字
isOpen表示是否打开，这个是针对文件夹的属性

2.3 Tree常用代码属性

mouseHandler鼠标事件处理类
selectedIndex选中的Item索引
selectedItem选择的Item数据项

2.4 文件夹效果的实现

export default class Tree_test extends Laya.Script {

    /** @prop {name:tree,tips:"tree",type:Node,default=null} */
    tree: Laya.Tree;

    constructor() { super(); }

    onAwake() {
        Laya.stage.bgColor = "#ffff00";
        this.tree.xml = this.onLoadData();

        /**鼠标点击处理Handler */
        // this.tree.mouseHandler = Laya.Handler.create(this,(event: Laya.Event,index: number)=>{
        //     //console.log(event);
        //     //console.log(index);
        //     //console.log(this.tree.selectedIndex);
        //     //console.log(this.tree.selectedItem);
        //    // console.log(this.tree.selectedPath);
        // },null,false);

        this.tree.on("click",this,(event: Laya.Event)=>{
                console.log(event);
                console.log(this.tree.selectedPath);
            });
    }

    /**
     * 用于组装需要用到的xml信息
     */
    private onLoadData(): any {
        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 += "<item label='Directory " + (j + 1) + "' isOpen='false'>";
                    for(let k: number = 0; k < 2; k++){
                        treeData += "<leaf label='file" + (k+1) + "'/>";
                    }
                    treeData += "</item>";
                }
                treeData += "</item>";
            }
            treeData += "</data>";

        //解析tree的数据
        let xml: any = Laya.Utils.parseXMLFromString(treeData);

        //将解析好的数据返回做备用
        return xml;
    }
}