flex4 List 渲染

http://blog.csdn.net/sevennhe/article/details/6123361

     昨晚看了flex4中项目渲染器itemRenderer的知识，今天自己动手写一个，增强记忆，做一个简单类似 网易视频 http://v.163.com/video/2011/1/1/6/V6ORP1516.html#ld=V5NV96K0F   "纵横天下"版块里的那个貌似是用List控件做的东东。

    打开 flash builder ，建一个名为 List 的项目，主文件 List.mxml，建一个类型为 ArrayCollection 的变量 datas，变量中的每一组值都保存了一个图片和对应标题的信息。建一个 List控件，属性 dataProvider 绑定之前建的变量datas。属性 itemRenderer 的值可以是系统现有的两个渲染器(DefaultItemRenderer和DefaultComplexItemRenderer)或者是自定义的渲染 器，值得一提的是，DefaultItemRenderer 只能显示一些简单的东西，例如：字符串，DefaultComplexItemRenderer 只能显示一些UI控件。也就是说不可以同时显示 字符串和图片。这时，可以使用 属性 itemRendererFunction值等于一个函数，在函数中对字符串和图片进行判断，然后分别返回对应的 渲染器(DefaultItemRenderer OR DefaultComplexItemRenderer)就可以了，如下：

view plain

1. protected  function itemRendererFunction(item:Object):ClassFactory  
2. {  
3.     return  item is String ?   
4.            new  ClassFactory(DefaultItemRenderer) :  
5.            new  ClassFactory(DefaultComplexItemRenderer);  
6. }  

渲染器每次循环都会调用这个函数，函数参数 item 里面保存着每次迭代的当前元素，我的变量datas里面保存的都是字符串的信息，所以这个用不着，只是提一下。

     另一种方法是使用自定义的渲染器，在List控件里面加入如下的代码:

view plain

1. < s:itemRenderer >   
2.     < fx:Component >   
3.         < s:ItemRenderer >   
4.             < s:layout >   
5.                 < s:VerticalLayout   horizontalAlign = "center"    
6.                                   verticalAlign = "middle" />   
7.             </ s:layout >   
8.             < s:Label   text = "{data.name}"   maxWidth = "100" />   
9.             < mx:Image   source = "{data.image}"   width = "100"   height = "100" />   
10.         </ s:ItemRenderer >   
11.     </ fx:Component >   
12. </ s:itemRenderer >   

上面的代码在List控件里设置了 itemRenderer 属性，属性的值为一个 ItemRenderer 的实例，实例里面包含了 Label 和 Image 两个控件，在ItemRenderer里面的 data 变量，保存着每次迭代的当前元素，设置 Label 的属性 text 等于 data.name ， Image 的属性 source 等于 data.image 。从而设置了每个元素的 标题和图片，以下是全部的代码：

view plain

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"   
5.                creationComplete="initApp()" >  
6.     <s:layout>  
7.         <s:BasicLayout/>  
8.     </s:layout>  
9.     <fx:Declarations>  
10.         <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
11.     </fx:Declarations>  
12.     <fx:Script>  
13.         <![CDATA[  
14.             import mx.collections.ArrayCollection;  
15.               
16.             import spark.skins.spark.DefaultComplexItemRenderer;  
17.             import spark.skins.spark.DefaultItemRenderer;  
18.               
19.             [Bindable]  
20.             protected  var datas:ArrayCollection;  
21.               
22.             private  function initApp(): void   
23.             {  
24.                 datas = new  ArrayCollection([  
25.                     {name: "aa" , image:  "http://localhost/images/1.jpg" },  
26.                     {name: "bb" , image:  "http://localhost/images/2.jpg" },  
27.                     {name: "cc" , image:  "http://localhost/images/3.jpg" },  
28.                     {name: "dd" , image:  "http://localhost/images/4.jpg" },  
29.                     {name: "ee" , image:  "http://localhost/images/5.jpg" },  
30.                     {name: "ff" , image:  "http://localhost/images/6.png" }  
31.                 ]);  
32.             }  
33.         ]]>  
34.     </fx:Script>  
35.     <s:Group x="50"  y= "50" >  
36.         <s:List dataProvider="{datas}"   
37.                 height="400" >  
38.             <s:layout>  
39.                 <s:VerticalLayout paddingBottom="10"    
40.                                   paddingLeft="10"    
41.                                   paddingRight="10"   
42.                                   paddingTop="10" />  
43.             </s:layout>  
44.             <s:itemRenderer>  
45.                 <fx:Component>  
46.                     <s:ItemRenderer>  
47.                         <s:layout>  
48.                             <s:VerticalLayout horizontalAlign="center"    
49.                                               verticalAlign="middle" />  
50.                         </s:layout>  
51.                         <s:Label text="{data.name}" />  
52.                         <mx:Image source="{data.image}"  width= "100"  height= "100" />  
53.                     </s:ItemRenderer>  
54.                 </fx:Component>  
55.             </s:itemRenderer>  
56.         </s:List>  
57.     </s:Group>  
58. </s:Application>  

 

 执行后的效果图：

代码算是基本完成了，但是想想...，如果其它页面也有需要列出类似这种List，是不是需要复制上面的自定义的渲染器那段代码。所以，应该考虑代 码重用的问题，把自定义的渲染器做成一个自定义的组件，新建一个基于 spark.components.supportClasses.ItemRenderer 的mxml组件文件ListItemRenderer.mxml，把代码：

view plain

1. < s:layout >   
2.         < s:VerticalLayout   horizontalAlign = "center"    
3.                           verticalAlign = "middle" />   
4. </ s:layout >   
5. < s:Label   text = "{data.name}"   maxWidth = "100" />   
6. < mx:Image   source = "{data.image}"   width = "100"   height = "100" />   

从List.mxml文件里面剪切到新建的ListItemRenderer.mxml文件，

view plain

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" >   
5.     < fx:Declarations >   
6.         <!-- 将非可视元素（例如服务、值对象）放在此处 -->   
7.     </ fx:Declarations >   
8.     < s:layout >   
9.         < s:VerticalLayout   horizontalAlign = "center"    
10.                           verticalAlign = "middle" />   
11.     </ s:layout >   
12.     < s:Label   text = "{data.name}"   maxWidth = "100" />   
13.     < mx:Image   source = "{data.image}"   width = "100"   height = "100" />   
14. </ s:ItemRenderer >   

修改List.mxml文件里的List控件代码如下：

view plain

1. < s:List   dataProvider = "{datas}"   
2.         height = "400"   
3.         itemRenderer = "components.ListItemRenderer" >   
4.     < s:layout >   
5.         < s:VerticalLayout   paddingBottom = "10"    
6.                           paddingLeft = "10"    
7.                           paddingRight = "10"   
8.                           paddingTop = "10" />   
9.     </ s:layout >   
10. </ s:List >   

设置List 的属性 itemRenderer 等于自定义的渲染器，执行List.mxml文件，显示结果和之前的一样。 = =!