羔羊引擎之列表的秘密
本帖最后由 qq229449388 于 2017-11-28 22:45 编辑终于说到列表了,羔羊引擎提供强大的列表组件,帮助你快速创建列表!激动不,往这边看!
attach://297.swf
说到列表,此处羔羊说一下关于列表虚拟布局的问题,已经知道或者不想知道的,可以直接跳过此处
虚拟布局,这词我第一次看见是从flexlite的源码注释里面看到,但实际上很久之前就已经接触过,只是不知道怎么称呼这种做法。虚拟布局的意思就是,假设列表有100行数据,因为列表是可以滚动的,可视区域其实最多只能看到数行,例如100行数据的列表,最多在可视区域看到10行,那么咱们可以有一种优化的方法,就是创建10个行显示对象,然后在滚动的时候,不断刷新数据,看起来像是有100行的显示对象,实际上只有10个显示对象在循环滚动。
ps:简单地解释,就是10行显示对象往上滚动的时候,上面第一行将离开可视区域,这样就可以重新排到可视区域的底部(因为上面滚出去了,下面就会滚进来)同时刷新数据。
大家知道虚拟布局之后,就该理解羔羊引擎的列表工作模式,实际上不止是羔羊引擎,最早flex的mx组件,spark组件,包括后来仿照flex的flexlite都使用虚拟布局。当然flex是可以不开启虚拟布局的。
首先羔羊引擎先教大家创建纵向行列表,类名GYListV,代码如下
gyListV = new GYListV(300,getItem);
gyListV.canSelectNum = 1;
gyListV.dataProvider = _dataArr;
gyListV.width = 100;
s.addChild(gyListV);咱们温和一点,一句一句来,构造函数实际上是有3个参数
GYLite.component.list.GYListV.GYListV(size:int, getGridFunc:Function=null, setGridFunc:Function=null)第一个参数 size,指定列表的总高度,为何只需要高度,因为这是纵向列表,无需考虑宽度
第二个参数 getGridFunc,这个参数特别说明一下,是通过外部提供一个方法,方法返回行显示对象实例,此实例必须实现IItemRender或者继承ItemRender,此做法与flex无异,提供ItemRender,则用户可以通过继承ItemRender来自定义自己的行显示内容
private function getItem():IItemRender
{
return new TestItemRender;
}以上是此节课源码getGridFunc的一个例子,可以看到只需要返回IItemRender接口的实例就可以了,ItemRender是IItemRender接口的实现者,而TestItemRender则是羔羊通过继承ItemRender的自定义行显示对象,TestItemRender内部代码会下面贴出解释
第三个参数 setGridFunc,设置数据
public function setData(grid:IItemRender,obj:Object):void
{
grid.setData(obj);
}此方法如果传null,内部则是直接按照grid.setData(obj);来执行,此处要具体说明这个方法的设置数据的意思
首先,一个列表是需要数据源,羔羊引擎数据源使用的是Array类型的数组,行显示容器,通过调用setData方法,来设置行的内容,具体下面讲解TestItemRender来说明,此方法定义需要给出两个参数grid和数据源数组的元素obj,也就是说,显示10行内容,则每行的ItemRender都会调用setData进行数据设置,大家注意,最后一个行列表可能数据为空,因为刚好填满是有可能9行列表就够了,最后一行刚好在可视区域外
gyListV.canSelectNum = 1;
这一句是表示可以选中的数量,默认是0,即不可选,设置1,则有一项可以选中。被选中的ItemRender的selected属性将为true,否则为false,当选中时,列表还会派发GYViewEvent.SELECTED事件,大家单选一项,大家可以从列表的selectedData获得当前选中的数据,selectedIndex或者当前选中的数据索引,selectedItem获得当前选中的行显示对象,
多项的选中,则通过selectList获得当前选中的数组,更多属性请参考api文档
gyListV.dataProvider = _dataArr;
设置数据源,羔羊引擎规定数据源为Array类型的数据,元素为Object类型,当然你可以直接用数字,ItemRender默认是把元素调用toString()进行字符串返回显示
gyListV.width = 100;
这里设置列表的宽度
gyListV.invalidData();
大家如果修改了数据源dataProvider,可以通过此句刷新列表数据
gyListV.updateItem(obj);
也可以通过这句,刷新单项数据的显示
现在说明一下,自定义行显示对象,羔羊提供的一个例子是TestItemRender,大家看源码
package
{
import GYLite.component.list.ItemRender;
import flash.events.MouseEvent;
public class TestItemRender extends ItemRender
{
public function TestItemRender()
{
super();
}
override protected function initComponent():void
{
super.initComponent();
_labelDisplay.selectable = false;
width = 100;
height = 25;
addEventListener(MouseEvent.ROLL_OVER, rlOver);
addEventListener(MouseEvent.ROLL_OUT, rlOut);
drawBack(0x313747);
}
private function drawBack(c:uint):void
{
graphics.clear();
graphics.beginFill(c);
graphics.drawRect(0,0,width,height);
graphics.drawRect(0,height - 1,width,1);
graphics.drawRect(width - 1,0,1,height);
graphics.endFill();
}
override public function setData(obj:Object):void
{
_data = obj;
if(_data == null)
{
visible = false;
return;
}
visible = true;
_labelDisplay.text = "No." + (itemIndex+1) + " " + _data.name;
}
private function rlOver(e:MouseEvent):void
{
drawBack(0x75c3d0);
}
private function rlOut(e:MouseEvent=null):void
{
drawBack(_selected?0xeb2d49:0x313747);
}
override public function set selected(val:Boolean):void
{
super.selected = val;
rlOut();
}
}
}此处就不罗嗦一句一句解读了,刚刚说过,自定义行显示对象,就是通过实现接口IItemRender或者继承ItemRender,这里就是用了继承的办法。
我做了一个简单的切换背景的列表行元素,dragBack切换背景,监听鼠标移入移除,来改变背景颜色,当然因为列表可选中一个,所以重写了set selected方法,以便选中的时候,显示选中状态的背景颜色。这里特别说明一下initComponent()方法,羔羊引擎所有组件初始化都是通过initComponent,大家可以重写此方法来修改组件内容
setData具体说明一下,每次有新的行出现在可视区域,此行显示对象就会调用setData来获取此行的数据,可见上面的代码,通过获取到的_data来设置文本内容此节讲解所有列表的行显示都使用TestItemRender来做样例
纵向列表到此讲解完毕,下面讲解横向列表,理解了纵向列表,横向列表就简单多了
gyListH = new GYListH(300,getItem);
gyListH.canSelectNum = 1;
gyListH.canDrag = true;
gyListH.x = 200;
gyListH.dataProvider = _dataArr;
gyListH.height = 25;
s.addChild(gyListH);
这里只说明一下构造函数的第一个参数size,纵向列表代表总高度,这里自然就是代表总宽度!其他内容跟纵向列表无异。这里多了一句
gyListH.canDrag = true;这个顺带说说一个拖拽功能,只要设置了canDrag为true,此列表就可以直接通过拖拽来滚动,不需要拖动滚动条
纵横列表都理解了,肯定有人会问,网格呢?当然应有的都要有,网格羔羊提供了GYListV和GYListH两个网格类,代表纵向和横向,碍于篇幅,横向就不说了,大家举一反三,大家来看看纵向
_dataArr2 = [];
var str:String = "羔羊引擎提供灵活多变的列表功能,请不问支持什么样的列表,如不理解列表原理,什么列表都没有,如理解列表原理什么列表都有。羔羊最近比较宽容,面对伸手党,提供有偿的技术服务,想要什么列表,给钱就可以了";
len = str.length;
for(i=0;i<len;++i)
{
_dataArr2.push({name:str.substr(i,1)});
}
gyGridV = new GYGridV(300,275,getItem);
gyGridV.y = 70;
gyGridV.x = 200;
gyGridV.canSelectNum = 1;
gyGridV.dataProvider = _dataArr2;
s.addChild(gyGridV);_dataArr2初始化部分为就不说了,就是把文字一个一个字放入_dataArr2作为数据
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
**** Hidden Message ***** 支持小羊,我的偶像!#:lol BUCUO ZHICHI 强烈支持羔羊 强烈支持羔羊
页:
[1]