UG4L20——树

本章代码关键字

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

FairyGUI的树

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

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

image

开启树功能

  1. 新建列表

    image

  2. 激活列表中的树视图

    image

树的相关属性

image

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

    相当于:image

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

    image

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

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

制作树中的内容

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

  • 名为expanded的控制器

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

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

    image

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

    image

    假设要实现这样的效果:

    imageimage

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

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

    image​​image​​image

  • 名为leaf的控制器

    如果作为根节点(该节点下有节点),控制器切换页面是0;如果作为叶子节点(该节点下无节点),那么控制器切换页面是1

    实现效果类似于:image

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

    image

  • 名为indent的对象

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

    image

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

    image

    这样,缩进才能影响其他组件的显示(假设缩进45像素):

    image

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

image

image

Unity中的使用树

  1. 获取树对象

    1
    2
    TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
    GTree tree = panel.m_tree;
  2. 获取树的根节点,该节点在面板上不可见,只有往该节点添加节点才能将内容显示在面板上

    1
    2
    3
    TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
    GTree tree = panel.m_tree;
    GTreeNode rootNode = tree.rootNode; //树的根节点,在面板上不可见,我们需要向该节点添加内容
  3. 新建一个节点类对象并添加节点

    其中,构造函数的参数为:

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

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

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

    显示效果:​image

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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);

    显示效果:image

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    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 = "第一个的节点子节点"; //这一句会报错

    显示效果:image

  5. 树的事件监听相关

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

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

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

      • 参数一:要更新显示的 GTreeNode
      • 参数二:传入的GTreeNode​对应的GComponent​
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      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 = "第一个节点的子节点";
      }

      显示效果:image

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

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      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);
      });

      输出效果(点击子节点):image

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

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

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

      • 执行折叠或展开的 GTreeNode
      • 是否是展开
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      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);
      }

      输出结果:image