羔羊引擎之列表的秘密

qq229449388

终于说到列表了，羔羊引擎提供强大的列表组件，帮助你快速创建列表！激动不，往这边看！

说到列表，此处羔羊说一下关于列表虚拟布局的问题，已经知道或者不想知道的，可以直接跳过此处
虚拟布局，这词我第一次看见是从flexlite的源码注释里面看到，但实际上很久之前就已经接触过，只是不知道怎么称呼这种做法。虚拟布局的意思就是，假设列表有100行数据，因为列表是可以滚动的，可视区域其实最多只能看到数行，例如100行数据的列表，最多在可视区域看到10行，那么咱们可以有一种优化的方法，就是创建10个行显示对象，然后在滚动的时候，不断刷新数据，看起来像是有100行的显示对象，实际上只有10个显示对象在循环滚动。
ps：简单地解释，就是10行显示对象往上滚动的时候，上面第一行将离开可视区域，这样就可以重新排到可视区域的底部（因为上面滚出去了，下面就会滚进来）同时刷新数据。
大家知道虚拟布局之后，就该理解羔羊引擎的列表工作模式，实际上不止是羔羊引擎，最早flex的mx组件，spark组件，包括后来仿照flex的flexlite都使用虚拟布局。当然flex是可以不开启虚拟布局的。

首先羔羊引擎先教大家创建纵向行列表，类名GYListV，代码如下

1. gyListV = new GYListV(300,getItem);
   
2.                         gyListV.canSelectNum = 1;
   
3.                         gyListV.dataProvider = _dataArr;
   
4.                         gyListV.width = 100;
   
5.                         s.addChild(gyListV);

复制代码

咱们温和一点，一句一句来，构造函数实际上是有3个参数

1. GYLite.component.list.GYListV.GYListV(size:int, getGridFunc:Function=null, setGridFunc:Function=null)

复制代码

第一个参数 size，指定列表的总高度，为何只需要高度，因为这是纵向列表，无需考虑宽度
第二个参数 getGridFunc，这个参数特别说明一下，是通过外部提供一个方法，方法返回行显示对象实例，此实例必须实现IItemRender或者继承ItemRender，此做法与flex无异，提供ItemRender，则用户可以通过继承ItemRender来自定义自己的行显示内容

1. private function getItem():IItemRender
   
2.                 {
   
3.                         return new TestItemRender;
   
4.                 }

复制代码

以上是此节课源码getGridFunc的一个例子，可以看到只需要返回IItemRender接口的实例就可以了，ItemRender是IItemRender接口的实现者，而TestItemRender则是羔羊通过继承ItemRender的自定义行显示对象，TestItemRender内部代码会下面贴出解释

第三个参数 setGridFunc，设置数据

1. public function setData(grid:IItemRender,obj:Object):void
   
2. {
   
3. grid.setData(obj);
   
4. }

复制代码

此方法如果传null，内部则是直接按照grid.setData(obj);来执行，此处要具体说明这个方法的设置数据的意思
首先，一个列表是需要数据源，羔羊引擎数据源使用的是Array类型的数组，行显示容器，通过调用setData方法，来设置行的内容，具体下面讲解TestItemRender来说明，此方法定义需要给出两个参数grid和数据源数组的元素obj，也就是说，显示10行内容，则每行的ItemRender都会调用setData进行数据设置，大家注意，最后一个行列表可能数据为空，因为刚好填满是有可能9行列表就够了，最后一行刚好在可视区域外

1. gyListV.canSelectNum = 1;

复制代码

这一句是表示可以选中的数量，默认是0，即不可选，设置1，则有一项可以选中。被选中的ItemRender的selected属性将为true，否则为false，当选中时，列表还会派发GYViewEvent.SELECTED事件，大家单选一项，大家可以从列表的selectedData获得当前选中的数据，selectedIndex或者当前选中的数据索引，selectedItem获得当前选中的行显示对象，
多项的选中，则通过selectList获得当前选中的数组，更多属性请参考api文档

1. gyListV.dataProvider = _dataArr;

复制代码

设置数据源，羔羊引擎规定数据源为Array类型的数据，元素为Object类型，当然你可以直接用数字，ItemRender默认是把元素调用toString()进行字符串返回显示

1. gyListV.width = 100;

复制代码

这里设置列表的宽度

1. gyListV.invalidData();

复制代码

大家如果修改了数据源dataProvider，可以通过此句刷新列表数据

1. gyListV.updateItem(obj);

复制代码

也可以通过这句，刷新单项数据的显示

现在说明一下，自定义行显示对象，羔羊提供的一个例子是TestItemRender，大家看源码

1. package
   
2. {
   
3.         import GYLite.component.list.ItemRender;
   
4.         
   
5.         import flash.events.MouseEvent;
   
6.         
   
7.         public class TestItemRender extends ItemRender
   
8.         {
   
9.                 public function TestItemRender()
   
10.                 {
    
11.                         super();
    
12.                 }
    
13.                
    
14.                 override protected function initComponent():void
    
15.                 {
    
16.                         super.initComponent();
    
17.                         _labelDisplay.selectable = false;
    
18.                         width = 100;
    
19.                         height = 25;
    
20.                         addEventListener(MouseEvent.ROLL_OVER, rlOver);
    
21.                         addEventListener(MouseEvent.ROLL_OUT, rlOut);
    
22.                         drawBack(0x313747);
    
23.                 }
    
24.                 private function drawBack(c:uint):void
    
25.                 {
    
26.                         graphics.clear();
    
27.                         graphics.beginFill(c);
    
28.                         graphics.drawRect(0,0,width,height);
    
29.                         graphics.drawRect(0,height - 1,width,1);
    
30.                         graphics.drawRect(width - 1,0,1,height);
    
31.                         graphics.endFill();
    
32.                 }
    
33.                
    
34.                 override public function setData(obj:Object):void
    
35.                 {
    
36.                         _data = obj;
    
37.                         if(_data == null)
    
38.                         {
    
39.                                 visible = false;
    
40.                                 return;
    
41.                         }
    
42.                         visible = true;
    
43.                         _labelDisplay.text = "No." + (itemIndex+1) + " " + _data.name;
    
44.                 }
    
45.                 private function rlOver(e:MouseEvent):void
    
46.                 {
    
47.                         drawBack(0x75c3d0);
    
48.                 }
    
49.                 private function rlOut(e:MouseEvent=null):void
    
50.                 {
    
51.                         drawBack(_selected?0xeb2d49:0x313747);
    
52.                 }
    
53.                 override public function set selected(val:Boolean):void
    
54.                 {
    
55.                         super.selected = val;
    
56.                         rlOut();
    
57.                 }
    
58.         }
    
59. }

复制代码

此处就不罗嗦一句一句解读了，刚刚说过，自定义行显示对象，就是通过实现接口IItemRender或者继承ItemRender，这里就是用了继承的办法。
我做了一个简单的切换背景的列表行元素，dragBack切换背景，监听鼠标移入移除，来改变背景颜色，当然因为列表可选中一个，所以重写了set selected方法，以便选中的时候，显示选中状态的背景颜色。这里特别说明一下initComponent()方法，羔羊引擎所有组件初始化都是通过initComponent，大家可以重写此方法来修改组件内容
setData具体说明一下，每次有新的行出现在可视区域，此行显示对象就会调用setData来获取此行的数据，可见上面的代码，通过获取到的_data来设置文本内容此节讲解所有列表的行显示都使用TestItemRender来做样例

纵向列表到此讲解完毕，下面讲解横向列表，理解了纵向列表，横向列表就简单多了

1. gyListH = new GYListH(300,getItem);
   
2.                         gyListH.canSelectNum = 1;
   
3.                         gyListH.canDrag = true;
   
4.                         gyListH.x = 200;
   
5.                         gyListH.dataProvider = _dataArr;
   
6.                         gyListH.height = 25;
   
7.                         s.addChild(gyListH);

复制代码

这里只说明一下构造函数的第一个参数size，纵向列表代表总高度，这里自然就是代表总宽度！其他内容跟纵向列表无异。这里多了一句

1. gyListH.canDrag = true;

复制代码

这个顺带说说一个拖拽功能，只要设置了canDrag为true，此列表就可以直接通过拖拽来滚动，不需要拖动滚动条

纵横列表都理解了，肯定有人会问，网格呢？当然应有的都要有，网格羔羊提供了GYListV和GYListH两个网格类，代表纵向和横向，碍于篇幅，横向就不说了，大家举一反三，大家来看看纵向

1. _dataArr2 = [];
   
2.                         var str:String = "羔羊引擎提供灵活多变的列表功能，请不问支持什么样的列表，如不理解列表原理，什么列表都没有，如理解列表原理什么列表都有。羔羊最近比较宽容，面对伸手党，提供有偿的技术服务，想要什么列表，给钱就可以了";
   
3.                         len = str.length;
   
4.                         for(i=0;i<len;++i)
   
5.                         {
   
6.                                 _dataArr2.push({name:str.substr(i,1)});
   
7.                         }
   
8.                         gyGridV = new GYGridV(300,275,getItem);
   
9.                         gyGridV.y = 70;
   
10.                         gyGridV.x = 200;
    
11.                         gyGridV.canSelectNum = 1;
    
12.                         gyGridV.dataProvider = _dataArr2;
    
13.                         s.addChild(gyGridV);

复制代码

_dataArr2初始化部分为就不说了，就是把文字一个一个字放入_dataArr2作为数据

1. GYLite.component.grid.GYGridV.GYGridV(sizeW:int, sizeH:int, getGridFunc:Function=null, setGridFunc:Function=null)

复制代码

贴了源码才发现创建网格这么简单，那就只说明一下构造函数，这里有sizeW和sizeH，就是设置网格宽高，至于每个格子大小，TestItemRender设置多大就是多大

大家要肯定要问，这是单向列表和网格，那么纵横的表格呢？还有不等高度的列表呢？还有样例里面那样，不等列宽和行高的excel表格呢？因为列表是复杂而又常用、重要的东西，一篇可是讲不完，后面会陆续讲解，而且会做点不一样的东西，可以预先告诉大家其他列表内容，可以依照demo和源码预先了解
1、不等行高的列表，请使用GYDataListV
2、不等列宽的列表，请使用GYDataListH
3、可以纵向和横向滚动的网格，请使用GYGrid
4、不等列宽行高的网格，请使用GYDataGrid

游客，如果您要查看本帖隐藏内容请回复

SUPERSEIYA

支持小羊，我的偶像！

laoniusanche

BUCUO ZHICHI

kaba47

强烈支持羔羊

13240360340

强烈支持羔羊