Flex 4 List itemClick的实现

冷不防 2021-10-26 14:44 260阅读 0赞

Adobe Flash Builder 4 简体中文正式版 下载:[http://subject.csdn.net/adobedownload/index.html ][http_subject.csdn.net_adobedownload_index.html]  
Adobe平台技术峰会课程视频：[http://adobev.csdn.net/][http_adobev.csdn.net]

“闪创未来”-Adobe Flash 平台应用开发大赛：[http://adobec.csdn.net/][http_adobec.csdn.net]

在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>

转载于:https://www.cnblogs.com/ada-zheng/archive/2013/03/27/2984760.html

[http_subject.csdn.net_adobedownload_index.html]: http://subject.csdn.net/adobedownload/index.html
[http_adobev.csdn.net]: http://adobev.csdn.net/
[http_adobec.csdn.net]: http://adobec.csdn.net/