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 

 效果：