Flex 4 List itemClick的实现

在Flex 3中List控件有itemClick事件，但是到了Flex 4中Spark
List控件却没有itemClick事件。是不是Spark List提供了和itemClick事件功能或作用差不多的事件呢？翻阅Flex 4
List的参考文档也没发现和itemClick事件相当的事件或属性，但是Flex 4 List中的change事件和Halo
List中的change时间似乎有所不同，于是乎想用spark List中的change事件来模拟itemClick事件，却发现并没有Halo
List中itemClick事件的功能强大。那如何在Flex 4中Spark
List控件上实现iemClick功能呢，方法总比问题多。在经过一番思考和尝试同时又向小欧咨询了一下后，终于实现了Flex 4 Spark
List控件的itemClick功能。虽然实现后感觉很简单，其实不然，实现虽简单，但是想法更重要。上回我介绍了Flex 4 Spark
List组件的分页功能的实现并附上了源代码，但是忘了附上PictureItemRender的实现代码，正好现在就在其基础上做一点点改进来实现
Spark List的itemClick功能并附上PictureItemRender的代码,如下所示:

运行结果SWF文件：

主文件FlexListPage.mxml

<?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"

xmlns:local="*" creationComplete="init()"

height="100%" width="100%">

<fx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.events.ItemClickEvent;

[Bindable] public var
totalPages:Number;

[Bindable] public var
currentPage:Number = 1;

[Embed(source='assets/backpack.jpg')]

[Bindable]

public var backpackCls:Class;

[Embed(source='assets/boots.jpg')]

[Bindable]

public var bootsCls:Class;

[Embed(source='assets/compass.jpg')]

[Bindable]

public var compassCls:Class;

[Embed(source='assets/goggles.jpg')]

[Bindable]

public var gogglesCls:Class;

[Embed(source='assets/helmet.jpg')]

[Bindable]

public var helmetCls:Class;

public
function prevPageHandler():void {

if(currentPage ==
1) return ;

currentPage--;

//上一页

list.scroller.verticalScrollBar.changeValueByPage(false);

}

public function
nextPageHandler():void {

if(currentPage ==
totalPages) return;

currentPage++;

//下一页

list.scroller.verticalScrollBar.changeValueByPage(true);

}

//设置list控件的滚动控件的样式

public
function init():void {

//关掉滚动控件的垂直和水平滚动条

list.scroller.setStyle('horizontalScrollPolicy', 'off');

list.scroller.setStyle('verticalScrollPolicy', 'off');

//设置滚动控件的垂直滚动条的滚动样式

list.scroller.verticalScrollBar.setStyle('smoothScrolling',
true);//设置为平滑滚动

list.scroller.verticalScrollBar.setStyle('repeatInterval',
500);//设置滚动到指定点的经过的时间

totalPages =
Math.ceil(list.scroller.viewport.contentHeight/list.scroller.verticalScrollBar.pageSize);

}

//itemClick事件处理函数

public
function itemClickHandler(evt:ItemClickEvent):void {

Alert.show("Name: "+evt.item.name+" Index: "+evt.index);

}

]]>

</fx:Script>

<s:VGroup x="10" y="5"
height="100%" width="100%">

<s:Label text="Page
{currentPage} of {totalPages}"/>

<s:HGroup>

<s:VGroup>

<s:Button id="prev"
label="Prev" click="prevPageHandler()"/>

<s:Button id="next" label="Next" click="nextPageHandler()"/>

</s:VGroup>

<s:List id="list"
width="400" height="374">

<s:dataProvider>

<s:ArrayCollection>

<fx:Object name="Backpack" photo="{backpackCls}"/>

<fx:Object name="Boots" photo="{bootsCls}"/>

<fx:Object name="Compass"
photo="{compassCls}"/>

<fx:Object
name="Goggles" photo="{gogglesCls}"/>

<fx:Object name="Helmet" photo="{helmetCls}"/>

<fx:Object name="Backpack" photo="{backpackCls}"/>

<fx:Object name="Boots" photo="{bootsCls}"/>

<fx:Object name="Compass"
photo="{compassCls}"/>

<fx:Object
name="Goggles" photo="{gogglesCls}"/>

<fx:Object name="Backpack" photo="{backpackCls}"/>

<fx:Object name="Boots" photo="{bootsCls}"/>

<fx:Object name="Compass"
photo="{compassCls}"/>

<fx:Object
name="Goggles" photo="{gogglesCls}"/>

<fx:Object name="Helmet" photo="{helmetCls}"/>

<fx:Object name="Backpack" photo="{backpackCls}"/>

<fx:Object name="Boots" photo="{bootsCls}"/>

<fx:Object name="Compass"
photo="{compassCls}"/>

<fx:Object
name="Goggles" photo="{gogglesCls}"/>

<fx:Object name="Helmet" photo="{helmetCls}"/>

<fx:Object name="Compass" photo="{compassCls}"/>

<fx:Object name="Goggles"
photo="{gogglesCls}"/>

<fx:Object
name="Helmet" photo="{helmetCls}"/>

<fx:Object name="Compass" photo="{compassCls}"/>

<fx:Object name="Goggles" photo="{gogglesCls}"/>

<fx:Object name="Helmet"
photo="{helmetCls}"/>

<fx:Object
name="Compass" photo="{compassCls}"/>

<fx:Object name="Goggles" photo="{gogglesCls}"/>

<fx:Object name="Backpack" photo="{backpackCls}"/>

<fx:Object name="Boots" photo="{bootsCls}"/>

<fx:Object name="Compass"
photo="{compassCls}"/>

</s:ArrayCollection>

</s:dataProvider>

<s:layout>

<s:TileLayout
requestedColumnCount="3"

columnWidth="120" rowHeight="120"/>

</s:layout>

<s:itemRenderer>

<fx:Component>

<local:PictureItemRenderer
itemClick="FlexListPage(outerDocument).itemClickHandler(event)"/>

</fx:Component>

</s:itemRenderer>

</s:List>

</s:HGroup>

</s:VGroup>

</s:Application>

ItemRender文件PictureItemRender.mxml:

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

<s:ItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009"

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

xmlns:mx="library://ns.adobe.com/flex/mx"

height="120" width="120"

click="simulateItemClick()"

autoDrawBackground="true">

<fx:Metadata>

[Event(name="itemClick", type="mx.events.ItemClickEvent")]
/*在ItemRender中声明itemClickEvent事件*/

</fx:Metadata>

<fx:Script>

<![CDATA[

import
mx.events.ItemClickEvent;

public function
simulateItemClick():void {

var
itemClick:ItemClickEvent = new ItemClickEvent(ItemClickEvent.ITEM_CLICK,
false,

false,null,itemIndex,null,data);

dispatchEvent(itemClick); //抛出itemClick事件对象

}

]]>

</fx:Script>

<s:VGroup
height="120" width="120">

<mx:Image
source="{data.photo}" height="120" width="120"/>

</s:VGroup>

</s:ItemRenderer>

以上代码很简单，我就不多做解释了，可以自己运行后慢慢研究。