UG4L20——树

本章代码关键字

GTree                        //FairyGUI的树类
gTree.rootNode                //获取树的根节点，该节点在面板上不可见，只有往该节点添加节点才能将内容显示在面板上
GTreeNode                    //树的节点类
gRootNode.AddChild()        //向节点添加节点
gTreeNode.cell                //获取节点对应的组件，可以修改组件内容，仅限于根节点下的子节点，并且是要AddChild过后才能改，不建议使用这种方式
gTree.treeNodeRender        //当树的TreeNode需要更新时的回调委托，建议使用这种方式去进行树结构中内容的初始化
gTree.onClickItem.Add()        //当点击一个子节点 会调用该委托函数
gTree.treeNodeWillExpand    //用于监听树的某个节点展开折叠的委托

FairyGUI的树

树是列表的一种特例，是组件的一种特殊拓展，利用树我们可以在FGUI中制作出树形结构的UI

何为树形结构，类似于Projects窗口内显示的文件树就是一种树形结构

​

开启树功能

1. 新建列表

   ​

2. 激活列表中的树视图

   ​

树的相关属性

• 每级锁紧：树节点的深度每增加一级，向右缩进的像素距离

  相当于：​

• 点击文件夹时展开/折叠：
  点击文件夹节点时是否自动展开或者折叠这个这个节点

  ​

  • 否：没有动作
  • 单击：单击时执行
  • 双击：双击时执行

设置好后，我们可以在编辑列表数据中为每个选项添加层级，0代表最上层，数字相同表示在同一层

制作树中的内容

首先一个创建树的节点组件，按照如下规则创建元件和控制器，树中的节点设计约定规则：

• 名为expanded的控制器

  当节点展开状态，控制器切换到页面1；当折叠时，控制器切换到页面0

  实现效果类似于：关闭时：，展开时：，左边的图片会切换

  

  如果有放置按钮（复选按钮）用于展开和折叠节点，那么这个按钮应该和控制器连接

  ​

  假设要实现这样的效果：

  ​

  创建组件后关联expanded的控制器属性即可

  例如图片切换的属性控制和黄色箭头的属性控制

  ​​​​​

• 名为leaf的控制器

  如果作为根节点（该节点下有节点），控制器切换页面是0；如果作为叶子节点（该节点下无节点），那么控制器切换页面是1

  实现效果类似于：​

  然后将属性控制关联到leaf控制器即可

  ​

• 名为indent的对象

  该对象用于设置缩进，位置设置为(0,0)，宽度建议为0，树会控制该缩进宽度，
  假设某节点缩进是15像素，深度为3，那么indent对象宽度会被设置为45
  缩进一般使用空白图形，也可使用其他内容，取决于缩进的表现样式

  ​

  同时，所有要被缩进影响的内容都必须要设置与indent的对象关联

  ​

  这样，缩进才能影响其他组件的显示（假设缩进45像素）：

  ​

最后将创建出来的树节点关联到树的项目资源内，在编辑列表数据，即可看到树的内容

​

​

Unity中的使用树

1. 获取树对象

   TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
   GTree tree = panel.m_tree;

2. 获取树的根节点，该节点在面板上不可见，只有往该节点添加节点才能将内容显示在面板上

   TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
   GTree tree = panel.m_tree;
   GTreeNode rootNode = tree.rootNode;     //树的根节点，在面板上不可见，我们需要向该节点添加内容

3. 新建一个节点类对象并添加节点

   其中，构造函数的参数为：

   • 参数一：该节点是否会有子节点
   • 参数二：该节点使用的自定义节点UI对象URL路径（可选，不填则直接使用树的项目资源）

   然后，通过gRootNode.AddChild()​即可添加节点

   TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
   GTree tree = panel.m_tree;
   GTreeNode rootNode = tree.rootNode;     //树的根节点，在面板上不可见，我们需要向该节点添加内容
   //添加节点时，先新建一个节点，再加到另一个节点即可
   GTreeNode node = new GTreeNode(true);
   rootNode.AddChild(node);

   显示效果：​

   只要创建节点时，设置了有子节点，就可以向该节点添加子节点

   TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
   GTree tree = panel.m_tree;
   GTreeNode rootNode = tree.rootNode;     //树的根节点，在面板上不可见，我们需要向该节点添加内容
   //添加节点时，先新建一个节点，再加到另一个节点即可
   GTreeNode node = new GTreeNode(true);
   rootNode.AddChild(node);
   //往子节点添加节点（该节点需要是可以添加子节点的），就有了层级关系
   GTreeNode nodeChild = new GTreeNode(false);
   node.AddChild(nodeChild);

   显示效果：​

4. 修改节点上的显示内容

   要修改节点上的显示内容，可以通过cell​属性来获取节点对应的组件，通过组件即可修改显示内容

   注意！如果想要通过这种方式修改内容 必须 是根节点的子节点 并且是要AddChild​过后才能改，不建议使用这种方式

   TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
   GTree tree = panel.m_tree;
   GTreeNode rootNode = tree.rootNode;     //树的根节点，在面板上不可见，我们需要向该节点添加内容
   //添加节点时，先新建一个节点，再加到另一个节点即可
   GTreeNode node = new GTreeNode(true);
   rootNode.AddChild(node);
   node.cell.text = "第一个节点";
   //nodeChild.cell.text = "第一个的节点子节点";        //这一句会报错

   显示效果：

5. 树的事件监听相关

   • 当树的TreeNode​需要更新时的回调委托

     每当树上显示的节点变化时（添加移除，或者折叠展开）都会触发该委托，建议使用这种方式去进行树结构中内容的初始化

     该委托要求方法的参数列表为：

     • 参数一：要更新显示的 GTreeNode​
     • 参数二：传入的GTreeNode​对应的GComponent​

     void Start()
     {
         TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
         GTree tree = panel.m_tree;
         GTreeNode rootNode = tree.rootNode;     //树的根节点，在面板上不可见，我们需要向该节点添加内容
         //添加节点时，先新建一个节点，再加到另一个节点即可
         GTreeNode node = new GTreeNode(true);
         node.data = "1";
         rootNode.AddChild(node);
         node.cell.text = "第一个节点";
         //往子节点添加节点（该节点需要是可以添加子节点的），就有了层级关系
         GTreeNode nodeChild = new GTreeNode(false);
         nodeChild.data = "2";
         node.AddChild(nodeChild);
         //nodeChild.cell.text = "第一个的节点子节点";
     
         tree.treeNodeRender = RenderTreeNode;
     }
     
     void RenderTreeNode(GTreeNode node, GComponent obj)
     {
         print("TreeNode改变");
         if (node.data.ToString() == "2")
             obj.text = "第一个节点的子节点";
     }

     显示效果：​

   • 当点击一个子节点 会调用该委托函数

     该委托与列表的一致gList.onClickItem.Add()​

     TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
     GTree tree = panel.m_tree;
     GTreeNode rootNode = tree.rootNode;     //树的根节点，在面板上不可见，我们需要向该节点添加内容
     //添加节点时，先新建一个节点，再加到另一个节点即可
     GTreeNode node = new GTreeNode(true);
     node.data = "1";
     rootNode.AddChild(node);
     node.cell.text = "第一个节点";
     //往子节点添加节点（该节点需要是可以添加子节点的），就有了层级关系
     GTreeNode nodeChild = new GTreeNode(false);
     nodeChild.data = "2";
     node.AddChild(nodeChild);
     
     //当点击一个子节点时，会调用该委托
     tree.onClickItem.Add((obj) =>
     {
         print(obj.data);
     });

     输出效果（点击子节点）：​

   • 用于监听 展开折叠的 委托

     当树监听到展开折叠时会执行的委托

     该委托要求方法的参数列表为：

     • 执行折叠或展开的 GTreeNode​
     • 是否是展开

     void Start()
     {
         TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
         GTree tree = panel.m_tree;
         GTreeNode rootNode = tree.rootNode;     //树的根节点，在面板上不可见，我们需要向该节点添加内容
         //添加节点时，先新建一个节点，再加到另一个节点即可
         GTreeNode node = new GTreeNode(true);
         node.data = "1";
         rootNode.AddChild(node);
         node.cell.text = "第一个节点";
         //往子节点添加节点（该节点需要是可以添加子节点的），就有了层级关系
         GTreeNode nodeChild = new GTreeNode(false);
         nodeChild.data = "2";
         node.AddChild(nodeChild);
         tree.treeNodeWillExpand = OnExpand;
     }
     
     void OnExpand(GTreeNode node, bool expend)
     {
         print(node + "_" + expend);
     }

     输出结果：

‍