UG4L9-14——列表

本章代码关键字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
GList                                //列表控件类
GObject.asList                        //将元件类对象as成FGUI列表类对象的属性
gList.defaultItem                    //通过代码设置列表项目资源
gList.AddItemFromPool()                //从池中取出或新建对象添加到列表中
gList.RemoveChildToPool()            //删除一个item，并将对象返回池中
gList.RemoveChildToPoolAt()            //删除指定索引的item，并返回池中
gList.RemoveChildrenToPool()        //删除一个范围内的item，或者全部删除，并将删除的对象都返回池里
gList.GetFromPool()                    //从池中取出对象，并不会添加到列表中
gList.ReturnToPool()                //将对象返回池中，并不会从列表中移除（私有方法，只了解）
gList.numItems                        //在列表内创建多少个组件
gList.itemRenderer                    //使用gList.numItems创建的组件会执行的回调函数
gList.ResizeToFit()                    //重置列表内组件大小
gList.onClickItem.Add()                //添加监听列表下的子组件被点击时的函数
gList.SetVirtual()                    //让列表成为虚拟列表
gList.SetVirtualAndLoop()            //让列表成为循环列表

列表

列表是组件的一种特殊扩展，它相当于是在组件的基础上，再加入了排序相关的功能
直接在舞台左侧的工具栏就可以点击创建列表

​image​

列表属性相关

​image​

  • 列表布局

    ​image​

    • 单列竖排：每行一个Item，竖向排列
    • 单行横排：每列一个item，横向排列
    • 横向流动：item横向依次排列，
      到视口右侧边缘或者到达指定列数，自动换行排列
    • 竖向流动：Item竖向依次排列，
      到视口底部边缘或者到达指定行数，
      返回顶部开启新的一列继续排列
    • 分页：视口宽度x视口高度作为单页大小，横向排列各个页面。
      每页中，item横向依次排列，
      到底视口右侧边缘或到达指定的列数，自动换行继续排列。
      当新的一行超出视口高度或到达指定的行数，则进入下一页。
      注意，分页只是列表的排列方式，不代表列表就是按页滚动。
      分页滚动需要在滚动属性里设置

  • 列表布局设置

    ​image​

    • 自动调整列表项目大小

      1. 列表布局为单列，则列表项目的宽度自动设置为列表显示区域的宽度
      2. 列表布局为单行，则列表项目的高度自动设置为列表显示区域的高度
      3. 列表布局为水平流动，且设置了列数时，则每行内的列表项目的宽度自动调整使行宽与列表显示区域的宽度相等
      4. 列表布局为垂直流动，且设置了行数时，则每列内的项目的高度自动调整使行高与列表显示区域的高度相等
      5. 列表布局为分页，则3、4规则均适用。

    • 折叠隐藏的项目

      如果勾选，当某个item不可见时（visible=false），
      列表不会为他留位置， 也就是排版时会忽略这个item；
      如果不勾选，在列表会为这个item保留位置，
      显示效果就是一个空白的占位

    • 点击项目时自动滚动到它全部可见

      勾选后，当点击某个item时，如果这个item处于部分显示状态，那么列表将会自动滚动到整个item显示完整。
      如果你的列表有超过列表视口大小的item，
      建议不要勾选，不然行为会很怪异。

  • 行数/列数：只对横向流动和竖向流动和分页布局有效，如果为0，则到边缘才换行

  • 渲染顺序

    • 升序：item索引越大，显示在越前面
    • 降序：item索引越小，显示在越前面
    • 拱形：自定义一个索引显示在最前面，两侧的依次渲染

  • 选择模式： 如果想要单选，那么下方的内容必须是单选按钮

  • 选择控制： 可以和控制器联动，这样当列表选中项目发生改变时，
    控制器也同时跳转到相同索引的页面

  • 分页控制： 可以绑定一个控制器

    当列表发生翻页滚动时（溢出处理必须为三种滚动之一，滚动必须勾选为页面模式），控制器也同时跳转到相同索引（页码）的页面。
    反之亦然，如果控制器跳转到某个页面，那么列表也同时滚动到相同索引（页码）的页面。

  • 树视图：如果想让列表作为树，勾选该选项

    关于树，详见：UG4L20——树

  • 项目资源： 设置列表默认使用的item类型

  • 编辑列表：资源一般拖入一个按钮即可

    ​image​

    • 标题：按钮显示的内容
    • 图标：可以关联图标

在Unity中的使用

  1. 获取列表

    1
    GList gList = view.GetChild("myList").asList;

  2. 列表常用API

    • 向列表添加和移除组件，使用AddChild​和RemoveChild​方法即可，但是一般不建议用这种方式

      1
      2
      3
      4
      5
      6
      7
      GList gList = view.GetChild("myList").asList;

      GObject obj = gList.AddChild(UIPackage.CreateObject("teach", "quanlity_3"));
      GObject obj2 = gList.AddChild(UIPackage.CreateObject("teach", "quanlity_3"));

      gList.RemoveChild(obj);
      obj.Dispose();

    • 通过代码设置列表项目资源

      1
      gList.defaultItem = "通过url地址去关联项目资源";

    列表存在一种特有的缓存池相关方法，我们可以使用缓存池来为列表添加移除组件，可以避免直接多次的删除组件导致的GC

    1. 从池中取出或新建对象添加到列表中

      该方法有两种重载，一个不需要参数，另一个需要字符串参数，
      如果不传入参数默认添加的是在FGUI编辑器里关联的项目资源
      如果传入参数则需要传入要添加的组件的url

      1
      2
      GObject obj3 = gList.AddItemFromPool();
      GObject obj4 = gList.AddItemFromPool();

    2. 删除一个item，并将对象返回池中

      1
      gList.RemoveChildToPool(obj3);

    3. 删除指定位置item，并返回池中

      1
      gList.RemoveChildToPoolAt(0);

    4. 删除一个范围内的item，或者全部删除，并将删除的对象都返回池里

      如果不传入参数就是全部移除

      1
      2
      gList.RemoveChildrenToPool();
      gList.RemoveChildrenToPool(0, 50);

    5. 从池中取出对象，并不会添加到列表中

      参数是url地址，一般不使用

      1
      gList.GetFromPool("url地址");

    6. 将对象返回池中，并不会从列表中移除

      这是私有方法，只做了解

      1
      gList.ReturnToPool(gObj);

  3. 使用回调函数修改列表

    先设置好添加组件后执行的回调函数，将回调函数赋值给gList.itemRenderer​
    回调函数要求参数列表为int​和GObject​，分别是组件的索引和组件自身，可用于为组件初始化，

    然后，使用gList.numItems​设置列表内组件的数量，列表将会自动按照设定的数量添加组件
    每次重新为gList.numItems​都会移除原有组件，重新添加组件，添加和移除都使用缓存池，多余的组件会存入池子中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    void Start()
    {
        //重复代码略..
        GList gList = view.GetChild("myList").asList;

        gList.itemRenderer = RenderListItem;
        gList.numItems = 20;    //只要进行数量赋值 就会自动创建n个对象 然后我们可以在委托函数中进行初始化操作
        gList.numItems = 10;    //每次重新赋值，会清空原列表并重新添加，会留下10个对象，多余的对象会放入池子中，添加与移除都是使用缓存池的
        gList.numItems = 20;    //如果在重新变成20 多出来的10个 是之前放入池子的10个
    }

    private void RenderListItem(int index, GObject obj)
    {
        obj.text = index.ToString();
    }

    ​image​

    • 重置列表内组件大小

      有时可能在添加或者移除组件时会遇到大小改变的情况，这时可以使用该方法自动调整组件大小

      1
      gList.ResizeToFit();

  4. 事件相关

    • 当列表下的子组件被点击时的监听函数

      1
      2
      3
      4
      gList.onClickItem.Add((obj) =>
      {
          print((obj.data as GObject).text);
      });

  5. 虚拟列表和循环列表

    • 虚拟列表

      虚拟列表指的是，列表只会创建视口范围内出现的组件，而视口外的组件不会创建，
      随着翻页的进行，离开视口范围的组件会被复用为新出现在视口返回的组件，重新进行初始化
      这可以大大提高那些实际存在大量内容的列表的性能，因为它只渲染了出现在视口范围内的部分组件，节省了性能

      虚拟列表使用的前提条件：

      1. 必须要定义itemRenderer
      2. 必须要开启滚动相关
      3. 一开始就要把项目资源设置好，或者我们可以通过代码设置项目资源
      1
      2
      gList.SetVirtual();
      gList.numItems = 1000;

      ​image​

    • 循环列表

      循环列表是基于虚拟列表的，它会让列表内的组件循环出现，
      也就是说，循环列表使用gList.numItems​创建的组件是循环创建视口内出现的组件
      假设创建了1000个组件，而视口返回内会出现20个组件，那么就会重复创建这20个组件

      循环列表只支持单行或者单列布局，不支持流动布局和分页布局

      1
      2
      gList.SetVirtualAndLoop()
      gList.numItems = 1000;

‍