Flex4中Repeater和Flex3中HorizontalList的用法

目前，Flex4中已经将Flex3中的HorizontalList组件替换为通用的List组件。

这里要注意他们的用法，像labelFunction方法，还有一个经常用的itemRenderer方法，该函数对应一个显示组件，使每一项数据对象对应一个组件。

还有一个就是Repeater 组件的用法。该示例中每一个数据对象对应一个RadioButton组件；使用currentItem赋值，? getRepeaterItem（）用来从重复的组件中获取数据。此外常用的还有一个currentIndex。

?

?

<?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" minWidth="955" minHeight="600">

??? <s:layout>

?????? <s:HorizontalLayout/>

??? </s:layout>

??? <fx:Style source="mycss.css">

??????

??? </fx:Style>

??? <fx:Declarations>

?????? <!-- 将非可视元素（例如服务、值对象）放在此处 -->

??? </fx:Declarations>

???

??? <fx:Script>

?????? <![CDATA[

?????????? import mx.collections.ArrayCollection;

?????????? private var arrData:Array = [{name:"banana",cat:"fruit",cost:0.99},

?????????????????????????????????????? {name:"bread",cat:"bakery",cost:1.99},

?????????????????????????????????????? {name:"orange",cost:0.53}];

?????????? [Bindable]??

?????????? private var dp:ArrayCollection = new ArrayCollection(arrData);

??????????

?????????? private function multiDisplay(item:Object):String

?????????? {

????????????? return item.cat + ": " + item.name + " $" + item.cost;

?????????? }

?????? ]]>

??? </fx:Script>

???

??? <!-- Flex3中的HorizontalList组件用法， lableFunction? labelField,itemRenderer 等方法 -->

??? <mx:HorizontalList dataProvider="{dp}" labelFunction="multiDisplay"/>

???

??? <!-- List注意itemRenderer的用法,其中MyVBox是自定义显示组件,这样每一个数据对象对应一个MyVBox组件?? -->

??? <s:List dataProvider="{dp}" itemRenderer="MyVBox"/>

???

??? <!-- 下面介绍使用Repeater遍历数据集 -->

??? <!-- click事件是从Repeater重复的组件中获取数据 -->

??? <mx:Tile>

?????? <s:Label id="priceLabel" text="Price Here"/>

?????? <mx:Repeater id="myRepeator" dataProvider="{dp}">

?????????? <s:RadioButton label="{myRepeator.currentItem.name}" click="priceLabel.text=event.target.getRepeaterItem().cost"/>

?????? </mx:Repeater>

??? </mx:Tile>

</s:Application>

?

?

?

?

?

?

?

--MyVBox.mxml组件

<?xml version="1.0" encoding="utf-8"?>

<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"

?????? ?xmlns:s="library://ns.adobe.com/flex/spark"

?????? ?xmlns:mx="library://ns.adobe.com/flex/mx" width="46" height="18">

??? <fx:Declarations>

?????? <!-- 将非可视元素（例如服务、值对象）放在此处 -->

??? </fx:Declarations>

??? <s:Label text="{data.name}" backgroundColor="0xff0ff000"/>

</mx:VBox>

?

?目前，Flex4中已经将Flex3中的HorizontalList