flex4 List 的简单使用
时间：2010-09-03 来源：Sange
AbacusListDemo.xml
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
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
效果：
相关阅读 更多 +
