ActionScript移动项目组件开发(2):可滚动的容器

内容简介

这篇文章是上一篇《 ActionScript移动项目组件开发(1):可滚动容器》的延续。在上一篇文章中，我们继承Sprite，封装了一个可滚动的容器，并且这个容器的交互方式是适用于移动设备的，因此我们可以使用这个容器，在移动项目中处理大尺寸的显示对象（比如一张风景图）。还有一种很普遍的需求，就是列表组件。比如我们要展现一个RSS数据源，那么列表是非常适合的一种方式。而列表组件则是一个典型的MVC模式的实施，Model就是列表组件赖以生成显示对象的数据源（数组，XML，或其它类型），View则是展现给用户的列表视图（显示对象），而Controller呢，则是响应用户的交互，比如选中某一项，或对列表进行滚动等行为控制。如果您之前使用过Flex框架，应该不会对这个组件感到陌生。Flex的组件体系中就包括了列表（List），而且在Flex 4.5 SDK中，列表组件还专门为移动类型的项目单独实现了一个皮肤，以便适应移动设备的交互方式，如下图所示：

图1：Flex 4.5中适用于移动设备的列表外观

和上一篇文章我们讨论的情况类似，如果是纯ActionScript的移动项目，就没有一个这样官方提供的组件可用。在这篇文章里，我们将探讨如何去实现这个列表组件。这个组件将具备什么样的特性呢？

首先，它和Flex中的列表组件行为非常类似，可用设置一个数组作为数据源(dataProvider)，指定一个项渲染器(ItemRenderer)，显示出可视化和可交互的列表(交互方式和ScrollableContainer类似，也是基于拖动)，并且允许每一行不同的高度，见下面的示例：

然后，它也可以适应大数据量的情况（比如1万条数据），优化的关键就在于它对“虚拟滚动”的支持，参见这个例子(1万条数据)：

这些源码已经放在瑞研社区(RIADEV)的开源项目RIASamples中，大家可以用SVN检出所有的源码。

SVN地址：

http://svn.riadev.com/riasamples/trunk/source/riadev-mobile-lib/

前置知识

您需要具备基础的ActionScript 3编程经验，并对于移动项目的特点（屏幕尺寸，交互方式，触碰事件）有一定的了解。

所需软件

您需要下载和安装下面的软件，以便运行这篇文章的相关源码：

Flash Builder 4.5 | 下载试用

实现过程

创建组件类

列表组件我们命名为ScrollableList，继承自Sprite:

public class ScrollableList extends Sprite

复制代码

列表中如果显示对象的尺寸超出了约束尺寸，也要实现滚动，这里可以看到，上一篇文章中我们创建的ScrollableContainer就可以派上用场了，我们在列表组件中放置这个容器的实例，以承载根据数据源生成的显示对象：

/**用可滚动的容器来承载数据项*/
protected var container:ScrollableContainer;

复制代码

在继续之前，我们先来思考一个问题，在展现方式上，ScrollableList和ScrollableContainer有何差异？基于Flash Player默认的坐标体系，添加到ScrollableContainer的显示对象实例，都将根据自己的x和y坐标来定位。但对于ScrollableList，我们希望它包含的显示对象的定位，由组件来统一管理，实现一个垂直排列的效果。这个实现过程其实不难，代码也不会很长，但问题是，这些代码我们要耦合到组件中吗？一旦之后我们要做水平排列的列表组件，或表格式的列表组件，因为布局的代码是耦合在组件中的，我们就无法轻松改变组件的一些属性来实现不同的布局，这是可扩展性的一个隐忧。这里我们仿照Flex Spark组件体系的一些设计思想，将对组件内部显示对象位置的管理，抽象为布局类和布局接口。这样将增强组件的可扩展性：

ScrollableList + HorizontalLayout = HorizontalScrollableList
ScrollableList + TileLayout = TileScrollableList

布局类的接口：ILayout，只包含一个方法layoutChildren，接受包含若干显示对象的Sprite容器，按照预定的规则排列这些显示对象：

public interface ILayout
{
/**布局子元件*/
function layoutChildren(container:Sprite,parentWidth:Number,parentHeight:Number):void;
}

复制代码

而列表式的垂直布局类VerticalLayout，则实现了这个接口：

public class VerticalLayout implements ILayout
{
/**如果设置为true，将自动调整子元件的宽度为容器宽度*/
public var matchContainerWidth:Boolean = false;
/**项之间的间距*/
public var gap:Number = 0;
/**
* 构造方法
* @param matchContainerWidth
* @param gap
*
*/
public function VerticalLayout(matchContainerWidth:Boolean=false,gap:Number=0)
{
this.matchContainerWidth = matchContainerWidth;
this.gap = gap;
}
/**
* 布局子元件
* @param container
* @param parentWidth
* @param parentHeight
*
*/
public function layoutChildren(container:Sprite, parentWidth:Number, parentHeight:Number):void
{
var num:Number = container.numChildren;
var currentY:Number = 0;
for (var i:int = 0; i < num; i++)
{
var child:DisplayObject = container.getChildAt(i);
child.x = 0;
child.y = currentY;
if(matchContainerWidth)
child.width = parentWidth;
currentY = child.y + child.height + gap;
}
}
}

复制代码

然后我们要修改一下ScrollableContainer，使得它可以接受一个布局类的实例，并在更新显示列表的时候，让布局类实例去管理子显示对象的布局。

普通浏览复制代码

/**@private*/
private var _layout:ILayout;
/**布局类实例，控制子元件的排列方式*/
public function get layout():ILayout
{
return _layout;
}
public function set layout(value:ILayout):void
{
if(_layout == value)
return;
_layout = value;
needUpdate = true;
}

然后要修改一下ScrollableContainer的measure这个方法，在度量之前，先让布局类实例去完成对子元件的定位：

if(_layout != null)
_layout.layoutChildren(contentGroup,containerWidth,containerHeight);

复制代码

而这个布局类的实例，则是由ScrollableList创建的，所以回到ScrollableList类，定义一个变量，并在

/**布局类*/
protected var layout:ILayout;
protected function createChildren():void
{
//...
layout = new VerticalLayout(true);
container.layout = layout;
//...
}

复制代码

然后是项目渲染器的定义。这也是Flex体系中的列表中的一个概念，所谓项目渲染器，就是一个显示类，当列表得到对它的引用，就可以在运行时根据数据动态创建这个类的实例，所以这里定义一个对项目渲染器的引用，类型则是Class。

/**项目渲染器类*/
public var itemRenderer:Class;

复制代码

那么一个项目渲染器应该具备什么样的属性和方法呢？我们可以定义一个接口来约束：它可以接受一个数据对象，具备两个状态(选中/非选中)，并且可以派发事件：

public interface IItemRenderer extends IEventDispatcher
{
function get data():Object;
function set data(value:Object):void;
function get selected():Boolean;
function set selected(value:Boolean):void;
function clear():void;
}

复制代码

用户在使用列表的时候，应该根据自己的实际需要，去创建一个项目渲染器并实现这个接口。

补充一点：基于性能考虑，建议用户在自己的项目渲染器中实现两个静态方法：createInstance 和 reclaim，类似于工厂模式，createInstance用来创建这个ItemRenderer类的实例，而reclaim方法则负责回收用不到的实例，当创建实例的时候，优先从缓存里去取，当缓存没有的时候再创建新的对象，这样做的好处是当数据频繁更新的时候，对象可以得到最有效的利用，防止出现内存溢出的问题。

然后为列表创建一个dataProvider属性，类型是数组，这就是列表所依赖的数据源。当数据源被设置，列表就可以根据数据源数组的长度，决定创建多少个ItemRenderer的实例。

普通浏览复制代码

/**@private*/
private var _dataProvider:Array;
/**数据源*/
public function get dataProvider():Array
{
return _dataProvider;
}
public function set dataProvider(value:Array):void
{
_dataProvider = value;
createItemRenderer();
}
/**
* 根据数据源，创建列表项
*/
protected function createItemRenderer():void
{
//clear first
var currentItemNum:Number = container.numChildren;
for (var i:int = 0; i < currentItemNum; i++)
{
if((itemRenderer as Object).reclaim != null)
(itemRenderer as Object).reclaim(container.removeChildAt(0));
}
//create ItemRenderer
var child:IItemRenderer;
for (var j:int = 0; j < dataProvider.length; j++)
{
if((itemRenderer as Object).createInstance != null)
child = (itemRenderer as Object).createInstance();
else
child = new itemRenderer();
child.data = dataProvider[j];
if(!child.hasEventListener(MouseEvent.MOUSE_DOWN))
child.addEventListener(MouseEvent.MOUSE_DOWN,itemClickHanlder);
container.addChild(child as DisplayObject);
}
}

注意上面的代码中，我们为每一个ItemRenderer实例都添加了事件侦听，这是为了根据点击的对象，确实列表当前那个数据被选中了，这是列表的一个基本特性。注意点击后的处理方法，我们做了一个特殊处理，原因是：移动设备的屏幕交互，MouseDown和MouseMove经常同时触发，造成判断错误，所以需要延迟对于点击事件的判断。

/**
* 当数据列表项被点击，设置selectedItem
* @param event
*/
protected function itemClickHanlder(event:Event):void
{
setTimeout(validateItemClick,200,event.currentTarget);
}
/**
* 因为移动设备的屏幕，MouseDown和MouseMove经常同时触发，造成判断错误，所以需要延迟对于点击事件的判断
* inScrollState是个布尔值，标记当前列表是否处于滚动状态，如何用户点击了某一项，同时触发了滚动，则“选择”这个操作是无效的，这样来避免事件的冲突
* @param child
*/
protected function validateItemClick(child:Object):void
{
if(inScrollState || selectedItem == child.data)
return;
selectedItem = child.data;
var itemChangeEvent:DataChangeEvent = new DataChangeEvent(DataChangeEvent.ITEM_CHANGE);
itemChangeEvent.selectedItem = _selectedItem;
dispatchEvent(itemChangeEvent);
}

复制代码

当selectedItem被设置，我们派发一个事件出去，这样列表的使用者就可以通过侦听这个事件来判断列表的哪一项被选中了，然后执行下一步操作。同样我们也要更改被选中的ItemRenderer实例的状态，由ItemRenderer类自己去控制状态变化引起的外观差异（比如不同的背景色）。

普通浏览复制代码

/**@private*/
private var _selectedItem:Object;
/**当前选中项*/
public function get selectedItem():Object
{
return _selectedItem;
}
public function set selectedItem(value:Object):void
{
if(_selectedItem == value)
return;
_selectedItem = value;
var currentItemNum:Number = container.numChildren;
for (var i:int = 0; i < currentItemNum; i++)
{
var child:IItemRenderer = container.getChildAt(i) as IItemRenderer;
if(child.data == _selectedItem)
child.selected = true;
else
child.selected = false;
}
}

对列表的初始化，自然是从列表的构造方法开始：

/**
* 构造方法
* 这个方法只是做一些初始化的工作
*/
public function ScrollableList(itemRenderer:Class,itemGap:Number=0)
{
this.itemRenderer = itemRenderer;
this.itemGap = itemGap;
createChildren();
}
/**
* 创建内部所需的对象
*/
protected function createChildren():void
{
container = new ScrollableContainer(useVirtualScroll);
container.horizontalScrollEnabled = false;
layout = new VerticalLayout(true,itemGap);
container.layout = layout;
super.addChild(container);
}

复制代码

同时要注意，对于List，不能由用户代码添加显示对象，它不是容器，只能由我们的类内部方法决定如何来控制列表的显示列表结构。所以禁止操作下面的方法：

普通浏览复制代码

/**@private*/
override public function addChild(child:DisplayObject):DisplayObject
{
return throwError();
}
/**@private*/
override public function addChildAt(child:DisplayObject, index:int):DisplayObject
{
return throwError();
}
/**@private*/
override public function removeChild(child:DisplayObject):DisplayObject
{
return throwError();
}
/**@private*/
override public function removeChildAt(index:int):DisplayObject
{
return throwError();
}
/**抛出错误*/
private function throwError():*
{
throw new Error("List不是容器，禁止操作此方法");
return null;
}

和ScrollableContainer类似，对于宽度和高度的定义我们也要重写(override)，以保证产生正确的行为。

普通浏览复制代码

/**@private*/
override public function get width():Number
{
return container.width;
}
override public function set width(value:Number):void
{
if (container.width == value)
return;
container.width = value;
}
/**@private*/
override public function get height():Number
{
return container.height;
}
override public function set height(value:Number):void
{
if (container.height == value)
return;
container.height=value;
}

OK，至此，列表的雏形已经完成。我们可以创建一个自定义的ItemRenderer，并生成一个数组存储数据，来测试列表的表现。下面的代码里，我们创建一个名为RSSItem的类来实现IItemRenderer接口，并加载一个RSS数据（XML格式），并加工成数组，传递给列表。

RSSItem.as

普通浏览复制代码

package renderer
{
import com.riadev.mobile.ui.renderer.IItemRenderer;
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.Sprite;
import flash.geom.Matrix;
import flash.text.TextField;
import flash.text.TextFormat;
/**
* 这是一个显示RSS某一项数据的显示对象类，实现IItemRenderer接口
* @author NeoGuo
*
*/
public class RSSItem extends Sprite implements IItemRenderer
{
private var labelTitle:TextField;
private var labelContent:TextField;
private var itemWidth:Number;
public function RSSItem()
{
//创建标题
labelTitle = new TextField();
labelTitle.width = 100;
labelTitle.height = 30;
labelTitle.x = 10;
labelTitle.y = 10;
var labelFormat:TextFormat = new TextFormat();
labelFormat.size = 20;
labelFormat.bold = true;
labelTitle.defaultTextFormat = labelFormat;
labelTitle.selectable = false;
addChild(labelTitle);
//创建摘要
labelContent = new TextField();
labelContent.width = 100;
labelContent.height = 20;
labelContent.x = 10;
labelContent.y = 30;
labelContent.wordWrap = true;
labelContent.multiline = true;
labelContent.selectable = false;
addChild(labelContent);
//
this.mouseChildren = false;
}
private var _data:Object;
public function get data():Object
{
return _data;
}
public function set data(value:Object):void
{
_data = value;
labelTitle.text = data.t;
labelContent.text = data.c;
if(parent != null)
drawBackGround();
}
private var _selected:Boolean;
public function get selected():Boolean
{
return _selected;
}
public function set selected(value:Boolean):void
{
if(_selected == value)
return;
_selected = value;
if(parent != null)
drawBackGround();
}
override public function get width():Number
{
return itemWidth;
}
override public function set width(value:Number):void
{
itemWidth = value;
if(parent != null)
drawBackGround();
}
/**
* 绘制背景
*/
public function drawBackGround():void
{
labelTitle.width = itemWidth-20;
labelContent.width = itemWidth-20;
labelContent.height = labelContent.textHeight + 20;
//bg
var g:Graphics = this.graphics;
g.clear();
var matrix:Matrix = new Matrix();
matrix.createGradientBox(itemWidth,height,90,0,0);
if(_selected)
g.beginGradientFill(GradientType.LINEAR,[0xFF0000,0x00FF00],[1,1],[1,255],matrix);
else
g.beginGradientFill(GradientType.LINEAR,[0xFFFFFF,0xCCCCCC],[1,1],[1,255],matrix);
g.drawRect(0,0,itemWidth,height+10);
g.endFill();
}
public function clear():void
{
//do nothing
}
}
}

然后我们创建一个主类，读取RSS数据，用列表来展现：

普通浏览复制代码

package
{
import com.riadev.mobile.events.DataChangeEvent;
import com.riadev.mobile.ui.container.ScrollableContainer;
import com.riadev.mobile.ui.control.ScrollableList;
import com.riadev.mobile.ui.renderer.IconItemRenderer;
import flash.display.Bitmap;
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import renderer.RSSItem;
import net.hires.debug.Stats;
/**
* 测试列表
* @author NeoGuo
*
*/
public class ListDemo extends Sprite
{
private var marginValue:int = 20;
private var list:ScrollableList;
private var feedURL:String = "assets/rss.xml";
private var data:XML;
private var testData:Array = [];
public function ListDemo()
{
super();
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
var loader:URLLoader = new URLLoader();
loader.load(new URLRequest(feedURL));
loader.addEventListener(Event.COMPLETE,dataComplete);
}
/**数据加载完成，生成数组*/
protected function dataComplete(event:Event):void
{
var data:XML = new XML(event.currentTarget.data);
testData = [];
var count:int = data.channel.item.length();
for(var i:int = 0;i < count; i++)
{
var itemNode:XML = data.channel.item[i];
var obj:Object = {t:itemNode.title,c:itemNode.description};
testData.push(obj);
}
initApp();
}
/**初始化应用，创建列表*/
private function initApp():void
{
list = new ScrollableList(RSSItem,1);
list.x = marginValue;
list.y = marginValue;
list.setStyle("borderColor",0xCCCCCC);
list.setStyle("bgColor",0x000000);
list.setStyle("bgAlpha",0.5);
list.dataProvider = testData;
list.addEventListener(DataChangeEvent.ITEM_CHANGE,itemChangeHandler);
addChild(list);
layoutChildren();
stage.addEventListener(Event.RESIZE,layoutChildren);
addChild(new Stats());
}
protected function itemChangeHandler(event:DataChangeEvent):void
{
trace(event.selectedItem);
}
private function layoutChildren(...args):void
{
list.width = stage.stageWidth - 2*marginValue;
list.height = stage.stageHeight - 2*marginValue;
}
}
}

注意代码中有这样一句：addChild(new Stats());Stats是一个开源类，用于实施检测SWF的性能（FPS，内存占用等），您可以在这个地址找到它的相关说明和下载：

https://github.com/mrdoob/Hi-ReS-Stats

运行这个类，就可以看到文章开头的第一个列表的实例效果：

图2：List运行效果

虽然做到这里已经小有成果，但您是否注意到其中隐藏的性能问题？在上面的实现中，有多少条数据，就对应产生多少个ItemRenderer的实例，这样的行为简单容易理解，但却也有着很大的性能隐患。当数据量比较小的时候（比如几十条，几百条数据），对于性能还没有很明显的影响，但数据量更大一些呢，几千条，甚至上万条数据，可以想象，单单处理上万个显示对象，就足以让Flash Player的CPU占用率“居高不下”，一旦要进行交互，更是惨不忍睹。那么有没有办法对这种情况进行优化呢？就是下面我们要探讨的内容。

为列表实现"虚拟滚动"

先让我们花一些篇幅，来了解“虚拟滚动”这个实现思路。在上面的实现中，产生性能问题的原因是：

显示对象过多，Flash Player渲染显示对象的负担过重(实际上1万个ItemRenderer实例，光创建就需要很长时间)
如此众多的显示对象，排列在contentGroup中,contentGroup的尺寸会非常大（如果单项的高度是100像素，那么contentGroup的高度将是100万像素）,因为滚动时实际上是移动contentGroup的位置，而且是根据帧频频繁的移动，性能消耗也是非常大的。

那么是否真的有必要需要这么多的显示对象呢？让我们从现实生活中找一些灵感：

在中国戏剧表演中，同一场能上场的演员是非常有限的，有时要表现千军万马出征的场景，演员是如何做的呢？比如有10个演员，舞台大小可以容纳6个人走过场，那么这10个人就排好队，一个接一个出场，第一个人走完过场后，进入幕后，马上排到队尾，以此来保证队伍的连续性，这样走上几个循环，观众可能感觉至少有几十个人走过去了，但实际上呢，只是这10个人而已。

观察我们的屏幕，当您对列表进行交互，无论它如何滚动，在同一时间，显示出来的数量是非常有限的（比如列表高度是500像素，单项的高度是100像素，那么同一时间能显示的最大数量，不超过6个），那么我们完全可以只创建6个显示对象，让它们在屏幕上进行走马灯式的运动，比如向上滚动时，超出屏幕区域的实例，则自动补上列表底部“即将露馅”的位置，以此类推，当向上滚动时，6个对象轮流补位，对我们的眼睛就会产生错觉，感觉是有很多的显示对象，进行不间断的滚动（实际上当然只有6个）；当向下滚动时也是如此处理。而我们要继续做的是，虚拟计算出当前的滚动位置，替换屏幕上显示对象的值。这样对于用户来说，仍然是顺畅的列表交互，但因为我们优化了实现细节，可以在很大程度上改善列表的运行效率（计算都是在数据层面，显示对象的渲染被确定在很小的范围内）。

下面这张图表现了这个过程：

图3：List虚拟滚动设想

下面回到我们的代码，来实现这个设想：

首先回到ScrollableList类，定义一个变量，确定是否开启虚拟滚动（虚拟滚动同时对ItemRenderer有一些限制，不能保持不同高度，所以这个选择权留给用户，由用户根据实际情况，决定是否开启虚拟滚动）。

/**是否开启虚拟滚动。在数据量大的时候，虚拟滚动可以节省一些性能，但要求每个itemRenderer必须高度相同*/
protected var useVirtualScroll:Boolean = false;

复制代码

然后创建一个VirtualItemRenderer，这是一个虚拟的ItemRenderer，不是显示对象，只是为了在模拟计算滚动位置时，存储相应的虚拟坐标值。

class VirtualItemRenderer
{
public var data:Object;
public var x:Number;
public var y:Number;
public function VirtualItemRenderer(data:Object)
{
this.data = data;
}
}

复制代码

然后声明一个virtualItemArr变量，类型是数组，当设置dataProvider时，会相应的生成相同数量的虚拟项目渲染器实例，存储在这个数组中，并将初始化计算好的虚拟坐标存储在每个对象中：

public function set dataProvider(value:Array):void
{
_dataProvider = value;
if(useVirtualScroll)
{
virtualItemArr = [];
var itemHeight:Number = (itemRenderer as Object).itemHeight;
for (var i:int = 0; i < dataProvider.length; i++)
{
var virtualItem:VirtualItemRenderer = new VirtualItemRenderer(dataProvider[i]);
virtualItem.y = i*(itemHeight+itemGap);
virtualItemArr.push(virtualItem);
}
}
createItemRenderer();
}

复制代码

创建一个measureFunction方法，这个方法用于计算虚拟的项目渲染器应该占据多大的尺寸：

普通浏览复制代码

/**
* 在开启虚拟滚动时，由这个方法计算虚拟的内容高度
* @return
*/
protected function measureFunction():Object
{
var cotentHeight:Number = _dataProvider.length*((itemRenderer as Object).itemHeight+itemGap);
return {width:width,height:cotentHeight};
}

同样要在ScrollableContainer增加一个measureFunction变量，类型是Function，一旦开启虚拟滚动，ScrollableList将把自身的measureFunction传递给ScrollableContainer，然后ScrollableContainer会用这个方法代替measure方法（因为实际显示对象数量与虚拟计算所要求的内容高度不一致，所以在开启虚拟滚动之后，ScrollableContainer的measure方法已经失去原有作用）。修改ScrollableContainer的measure方法，增加一段定义：

普通浏览复制代码

if(measureFunction != null)
{
var returnObj:Object = measureFunction();
_contentWidth = returnObj.width;
_contentHeight = returnObj.height;
drawContentBackground();
return;
}

回到ScrollableList类，修改createChildren方法，增加下面的定义：

普通浏览复制代码

if(useVirtualScroll)
{
container.measureFunction = measureFunction;
container.addEventListener("startScroll",contentScrollHandler);
container.addEventListener("endScroll",contentScrollHandler);
}

因为开启虚拟滚动后，交互的控制器：ScrollControler将不再控制真实的contentGroup的实际坐标值（实际坐标值将一直是0），而是计算一个虚拟的坐标值。所以如果您此时对列表进行拖动，将看不到任何效果，但实际虚拟移动值已经被计算出来了，同时会触发两个事件：startScroll和endScroll。我们需要侦听这两个事件，然后控制显示列表中仅有的几个ItemRenderer实例，去模拟出整个列表滚动的效果。

/**
* 当"虚拟的滚动"被触发时，处理显示列表中的内容
* @param event
*/
protected function contentScrollHandler(event:Event):void
{
if(event.type == "startScroll")
{
addEventListener(Event.ENTER_FRAME,changeChildrenLocation);
inScrollState = true;
}
else
{
inScrollState = false;
if(container.virtualContentGroupY==0 || container.virtualContentGroupY==(container.height-container.contentHeight))
{
changeChildrenLocation();
}
removeEventListener(Event.ENTER_FRAME,changeChildrenLocation);
}
}
/**
* 计算子元件的位置，仅在虚拟滚动时使用
* @param event
*/
protected function changeChildrenLocation(...args):void
{
if(container.virtualContentGroupY > 0 || container.virtualContentGroupY < -(container.contentHeight-container.height))
{
return;
}
var itemHeight:Number = (itemRenderer as Object).itemHeight;
//表记
var dataLength:int = virtualItemArr.length;
needUpdateItemArr.length = 0;
var virtualItem:VirtualItemRenderer;
var currentItemY:Number;
for (var i:int = 0; i < dataLength; i++)
{
virtualItem = virtualItemArr[i];
currentItemY = virtualItem.y+container.virtualContentGroupY;
if(currentItemY > -itemHeight && currentItemY < container.height)
{
needUpdateItemArr.push(virtualItem);
}
}
//定位
dataLength = needUpdateItemArr.length;
if(dataLength < container.numChildren)
{
container.getChildAt(container.numChildren-1).y = -itemHeight;
}
for (i = 0; i < dataLength; i++)
{
virtualItem = needUpdateItemArr[i];
currentItemY = virtualItem.y+container.virtualContentGroupY;
var displayItem:IItemRenderer = container.getChildAt(i) as IItemRenderer;
if(displayItem.data != virtualItem.data)
displayItem.data = virtualItem.data;
displayItem.y = currentItemY;
}
}

复制代码

然后注意ScrollControler类，增加两个属性：virtualContentGroupX和virtualContentGroupY，这两个值将存储开启虚拟滚动后，系统模拟计算出的contentGroup的坐标值(注意contentGroup的实际坐标值不会变化，永远是0)。

/**开启虚拟滚动*/
public var useVirtualScroll:Boolean = false;
/**一旦开启虚拟滚动，则以此值为计算依据，实际值将永远是0*/
public var virtualContentGroupX:Number = 0;
/**@copy #virtualContentGroupX*/
public var virtualContentGroupY:Number = 0;

复制代码

然后要修改其中所有涉及坐标值计算的部分，判断是计算实际坐标值，还是虚拟坐标值，比如：

if(horizontalScrollEnabled)
{
if(useVirtualScroll)
virtualContentGroupX=parent.mouseX - currentMouseOffsetX;
else
contentGroup.x=parent.mouseX - currentMouseOffsetX;
}

复制代码

OK，优化工作完成。现在我们可以再建立一个主类，写测试代码，运行起来看实际效果：

普通浏览复制代码

package
{
import com.riadev.mobile.events.DataChangeEvent;
import com.riadev.mobile.ui.control.ScrollableList;
import com.riadev.mobile.ui.renderer.IconItemRenderer;
import flash.display.Bitmap;
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import net.hires.debug.Stats;
/**
* 测试开启虚拟滚动的列表
* @author NeoGuo
*
*/
public class ListDemo2 extends Sprite
{
private var marginValue:int = 20;
private var list:ScrollableList;
private var testData:Array = [];
public function ListDemo2()
{
super();
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
fillData();
initApp();
addChild(new Stats());
}
protected function fillData():void
{
for (var i:int = 0; i < 10000; i++)
{
testData.push({label:"P "+(i+1),icon:"assets/air.jpg"});
}
}
private function initApp():void
{
list = new ScrollableList(IconItemRenderer,1,true);
list.x = marginValue;
list.y = marginValue;
list.setStyle("borderColor",0xCCCCCC);
list.setStyle("bgColor",0x000000);
list.setStyle("bgAlpha",0.5);
list.dataProvider = testData;
list.addEventListener(DataChangeEvent.ITEM_CHANGE,itemChangeHandler);
addChild(list);
layoutChildren();
stage.addEventListener(Event.RESIZE,layoutChildren);
}
protected function itemChangeHandler(event:DataChangeEvent):void
{
trace(event.selectedItem);
}
private function layoutChildren(...args):void
{
list.width = stage.stageWidth - 2*marginValue;
list.height = stage.stageHeight - 2*marginValue;
}
}
}

注意代码中给List提供的数据源是一个包含1万条数据的数组。您可以开启或关闭虚拟滚动，观察性能对比。下面是笔者电脑上的实测结果：

图4：未开启虚拟滚动测试结果

图5：开启虚拟滚动测试结果

后续工作

欢迎您体验和使用这个组件，并继续完善它。您可以继续浏览Adobe开发者中心，寻找移动开发相关的文章和资源，加深这一领域的知识技能。

原文转载：http://www.riadev.com/flex-thread-1218-1-1.html