Flex Gumbo中如何利用useVirtualLayout属性创建虚拟布局List的例子

By Minidxer | August 26, 2009

接下来的Flex Gumbo中如何通过在useVirtualLayout属性上设置layout对象，创建虚拟布局List。



下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_List_layout_useVirtualLayout_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo"
  6.         initialize="init();">
  7.  
  8.     <fx:Script>
  9.         <![CDATA[
  10.             private function init():void {
  11.                 var idx:uint;
  12.                 var len:uint = 2000;
  13.                 var arr:Array = [];
  14.                 for (idx=0; idx<len; idx++) {
  15.                     arr.push("Item #" + idx);
  16.                 }
  17.                 arrList = new ArrayList(arr);
  18.             }
  19.         ]]>
  20.     </fx:Script>
  21.  
  22.     <fx:Declarations>
  23.         <s:ArrayList id="arrList" />
  24.     </fx:Declarations>
  25.  
  26.     <s:List id="list"
  27.             dataProvider="{arrList}"
  28.             skinClass="skins.CustomListSkin"
  29.             horizontalCenter="0"
  30.             verticalCenter="0" />
  31.  
  32. </s:Application>

下面是Skin类Skins/CustomListSkin.mxml的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:SparkSkin name="CustomListSkin"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         minWidth="112" minHeight="112"
  6.         alpha.disabled="0.5">
  7.     <s:states>
  8.         <s:State name="normal" />
  9.         <s:State name="disabled" />
  10.     </s:states>
  11.  
  12.     <fx:Metadata>
  13.         <![CDATA[
  14.             [HostComponent("spark.components.List")]
  15.         ]]>
  16.     </fx:Metadata>
  17.  
  18.     <fx:Script>
  19.         /* Define the skin elements that should not be colorized.
  20.            For list, the skin itself is colorized but the individual parts are not. */
  21.         static private const exclusions:Array = ["scroller", "background"];
  22.  
  23.         override public function get colorizeExclusions():Array {return exclusions;}
  24.  
  25.         static private const contentFill:Array = ["bgFill"];
  26.         override public function get contentItems():Array {return contentFill};
  27.     </fx:Script>
  28.  
  29.     <!-- border -->
  30.     <s:Rect left="0" right="0" top="0" bottom="0">
  31.         <s:stroke>
  32.             <s:SolidColorStroke color="0x686868" weight="1"/>
  33.         </s:stroke>
  34.     </s:Rect>
  35.  
  36.     <!-- fill -->
  37.     <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
  38.         <s:fill>
  39.             <s:SolidColor id="bgFill" color="0xFFFFFF" />
  40.         </s:fill>
  41.     </s:Rect>
  42.  
  43.     <s:Scroller id="scroller"
  44.             focusEnabled="false"
  45.             horizontalScrollPolicy="off"
  46.             left="1" top="1" right="1" bottom="1">
  47.         <s:DataGroup id="dataGroup"
  48.                 itemRenderer="spark.skins.default.DefaultItemRenderer">
  49.             <s:layout>
  50.                 <s:VerticalLayout gap="0"
  51.                         horizontalAlign="contentJustify"
  52.                         useVirtualLayout="true"
  53.                         requestedRowCount="6" />
  54.             </s:layout>
  55.         </s:DataGroup>
  56.     </s:Scroller>
  57.  
  58. </s:SparkSkin>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Gumbo, List | No Comments » | Tags: , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll