Flex 4 List Data Paging(Flex 4 List控件分页功能的实现)

SWF: 

      要想了解Flex 4 List控件的分页功能(paging)的实现,必须先理解Flex 4中滚动机制的实现原理,可以参考我上次介绍的Flex 4中的Scrolling和viewports机制这篇文章。下面从Spike的代码开始介绍List控件分页功能(paging)的实现：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:local="*" creationComplete="init()"
               height="100%" width="100%">
   
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            [Bindable] public var totalPages:Number;
            [Bindable] public var currentPage:Number = 1;
           
            [Embed(source='assets/backpack.jpg')]
            [Bindable]
            public var backpackCls:Class;
           
            [Embed(source='assets/boots.jpg')]
            [Bindable]
            public var bootsCls:Class;
           
            [Embed(source='assets/compass.jpg')]
            [Bindable]
            public var compassCls:Class;
           
            [Embed(source='assets/goggles.jpg')]
            [Bindable]
            public var gogglesCls:Class;
           
            [Embed(source='assets/helmet.jpg')]
            [Bindable]
            public var helmetCls:Class;
           
            public function prevPageHandler():void {
                if(currentPage == 1) return ;
                currentPage--;
                //上一页
                list.scroller.verticalScrollBar.changeValueByPage(false);
            }
           
            public function nextPageHandler():void {
                if(currentPage == totalPages) return;
                currentPage++;
                //下一页
                list.scroller.verticalScrollBar.changeValueByPage(true);
            }
           
            //设置list控件的滚动控件的样式
            public function init():void {
                //关掉滚动控件的垂直和水平滚动条
                list.scroller.setStyle('horizontalScrollPolicy', 'off');
                list.scroller.setStyle('verticalScrollPolicy', 'off');
                //设置滚动控件的垂直滚动条的滚动样式
                list.scroller.verticalScrollBar.setStyle('smoothScrolling', true);//设置为平滑滚动
                list.scroller.verticalScrollBar.setStyle('repeatInterval', 500);//设置滚动到指定点的经过的时间
                totalPages = Math.ceil(list.scroller.viewport.contentHeight/list.scroller.verticalScrollBar.pageSize);
            }
           
        ]]>
    </fx:Script>
    <s:VGroup x="10" y="5" height="100%" width="100%">
        <s:Label text="Page {currentPage} of {totalPages}"/>
        <s:HGroup>
            <s:VGroup>
                <s:Button id="prev" label="Prev" click="prevPageHandler()"/>
                <s:Button id="next" label="Next" click="nextPageHandler()"/>
            </s:VGroup>
            <s:List id="list" width="400" height="362">
                <s:dataProvider>
                    <s:ArrayCollection>
                        <fx:Object name="Backpack" photo="{backpackCls}"/>
                        <fx:Object name="Boots" photo="{bootsCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                        <fx:Object name="Goggles" photo="{gogglesCls}"/>
                        <fx:Object name="Helmet" photo="{helmetCls}"/>
                        <fx:Object name="Backpack" photo="{backpackCls}"/>
                        <fx:Object name="Boots" photo="{bootsCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                        <fx:Object name="Goggles" photo="{gogglesCls}"/>
                        <fx:Object name="Backpack" photo="{backpackCls}"/>
                        <fx:Object name="Boots" photo="{bootsCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                        <fx:Object name="Goggles" photo="{gogglesCls}"/>
                        <fx:Object name="Helmet" photo="{helmetCls}"/>
                        <fx:Object name="Backpack" photo="{backpackCls}"/>
                        <fx:Object name="Boots" photo="{bootsCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                        <fx:Object name="Goggles" photo="{gogglesCls}"/>
                        <fx:Object name="Helmet" photo="{helmetCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                        <fx:Object name="Goggles" photo="{gogglesCls}"/>
                        <fx:Object name="Helmet" photo="{helmetCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                        <fx:Object name="Goggles" photo="{gogglesCls}"/>
                        <fx:Object name="Helmet" photo="{helmetCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                        <fx:Object name="Goggles" photo="{gogglesCls}"/>
                        <fx:Object name="Backpack" photo="{backpackCls}"/>
                        <fx:Object name="Boots" photo="{bootsCls}"/>
                        <fx:Object name="Compass" photo="{compassCls}"/>
                    </s:ArrayCollection>
                </s:dataProvider>
                <s:layout>
                    <s:TileLayout horizontalGap="0" verticalGap="0" requestedColumnCount="3"
                                  columnWidth="120" rowHeight="120"/>
                </s:layout>
                <s:itemRenderer>
                    <fx:Component>
                        <local:PictureItemRenderer />
                    </fx:Component>
                </s:itemRenderer>
            </s:List>
        </s:HGroup>

    </s:VGroup>
</s:Application>

   Flex 4中List控件在皮肤中定义了Scroller控件，Scroller 组件显示一个称为视域的单个可滚动组件，以及水平滚动条和垂直滚动条。在上面代码中通过设置List的scroller的horizontalScrollPolicy和verticalScrollPolicy样式，关掉了scroller的水平和垂直滚动条。最后通过scroller的verticalScrollerBar的changeValueByPage()方法来控制显示下一页或上一页。这里将List控件的高度设为362，而不是刚好显示三行图片的高度360。至于为什么要高两个像素，目前还没有完全弄清楚，也许是边框或间隔什么的占的空间。总页数是通过scroller中的内容高度除以scroller的垂直页面大小(高度)计算出来的，这样就基本实现了List的分页功能，是不是很简单,那就赶快动手试试吧。至于上面提到的高度问题，还望高手指点指点。