flex4 List 的简单使用

AbacusListDemo.xml

 1  <? xml version = " 1.0 "  encoding = " utf-8 " ?>
 2  < s:Application xmlns:fx = " http://ns.adobe.com/mxml/2009 "  
 3                 xmlns:s = " library://ns.adobe.com/flex/spark "  
 4                 xmlns:mx = " library://ns.adobe.com/flex/mx "  minWidth = " 955 "  minHeight = " 600 "  xmlns:views = " com.shenmo.views.* " >
 5       < fx:Declarations >
 6           <!--  Place non - visual elements (e.g., services, value objects) here  -->
 7       </ fx:Declarations >
 8       < fx:Script >
 9           <! [CDATA[
10              import com.shenmo.utils.BindablePicture;
11              import mx.collections.ArrayCollection;
12              [Bindable]
13               private  var abacusArrayCollection:ArrayCollection  =   new  ArrayCollection([
14                  {pic:BindablePicture.abacus_left},
15                  {pic:BindablePicture.abacus_00},
16                  {pic:BindablePicture.abacus_00},
17                  {pic:BindablePicture.abacus_bit},
18                  {pic:BindablePicture.abacus_00},
19                  {pic:BindablePicture.abacus_00},
20                  {pic:BindablePicture.abacus_bit},
21                  {pic:BindablePicture.abacus_00},
22                  {pic:BindablePicture.abacus_00},
23                  {pic:BindablePicture.abacus_bit},
24                  {pic:BindablePicture.abacus_00},
25                  {pic:BindablePicture.abacus_00},
26                  {pic:BindablePicture.abacus_bit},
27                  {pic:BindablePicture.abacus_00},
28                  {pic:BindablePicture.abacus_00},
29                  {pic:BindablePicture.abacus_bit},
30                  {pic:BindablePicture.abacus_00},
31                  {pic:BindablePicture.abacus_00},                
32                  {pic:BindablePicture.abacus_right}
33              ]);
34          ]] >
35       </ fx:Script >
36      
37      
38       <!---  算盘  -->
39       < s:List id = " lstAbacus "  horizontalCenter = " 0 "  verticalCenter = " 0 "  borderVisible = " false "  width = " 648 "  dataProvider = " {abacusArrayCollection} " >  
40           < s:layout >
41               < s:HorizontalLayout gap = " 0 "  requestedColumnCount = " 17 " />
42           </ s:layout >
43           < s:itemRenderer >
44               < fx:Component >
45                   < views:AbacusItemRender  />
46               </ fx:Component >
47           </ s:itemRenderer >
48       </ s:List >
49  </ s:Application >
50 

注：abacusArrayCollection 的pic值是图片地址

 

 AbacusItemRender.mxml

 1  <? xml version = " 1.0 "  encoding = " utf-8 " ?>
 2  < s:ItemRenderer xmlns:fx = " http://ns.adobe.com/mxml/2009 "  
 3                  xmlns:s = " library://ns.adobe.com/flex/spark "  
 4                  xmlns:mx = " library://ns.adobe.com/flex/mx "   autoDrawBackground = " false "    >     
 5       < fx:Declarations >
 6           <!--  Place non - visual elements (e.g., services, value objects) here  -->
 7       </ fx:Declarations >
 8       < s:layout >
 9           < s:HorizontalLayout gap = " 0 "   />
10       </ s:layout >
11       < mx:Image source = " {data.pic} "   />     
12  </ s:ItemRenderer >
13 

 效果：

 

转载于:https://www.cnblogs.com/sange/archive/2010/09/03/1817316.html