Flex 4 项目渲染器

发布时间：2020-12-15 04:35:39 所属栏目：百科来源：网络整理

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

? ?昨晚看了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)就可以了，如下：

[java]? 
   view plain 
   copy 
    
   
 protected?function?itemRendererFunction(item:Object):ClassFactory??
 {??
 ????return?item?is?String?????
 ???????????new?ClassFactory(DefaultItemRenderer)?:??
 ???????????new?ClassFactory(DefaultComplexItemRenderer);??
 }??

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

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

[xhtml]? 
   copy

<s:itemRenderer>??

????fx:Component>??
????????s:ItemRenderer ????????????s:layout ????????????????s:VerticalLayout?horizontalAlign="center"???
??????????????????????????????????verticalAlign="middle"/>??
????????????</s:Label?text="{data.name}"?maxWidth="100"mx:Image?source="{data.image}"?width="100"?height="100"/>??
???????? ???? >??

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

[c-sharp]? 
   copy

<?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"??
???????????????creationComplete="initApp()">??
????<s:layout>??
????????<s:BasicLayout/>??
????</s:layout>??
????<fx:Declarations>??
??????????
????</fx:Declarations>??
????<fx:Script>??
????????<![CDATA[??
????????????import?mx.collections.ArrayCollection;??
??????????????
????????????import?spark.skins.spark.DefaultComplexItemRenderer;??
????????????import?spark.skins.spark.DefaultItemRenderer;??
??????????????
????????????[Bindable]??
????????????protected?var?datas:ArrayCollection;??
private?function?initApp():void??
????????????{??
????????????????datas?=?new?ArrayCollection([??
????????????????????{name:?"aa",?image:?"http://localhost/images/1.jpg"},??
????????????????????{name:?"bb",?image:?"http://localhost/images/2.jpg"},??
????????????????????{name:?"cc",?image:?"http://localhost/images/3.jpg"},248); line-height:18px"> ????????????????????{name:?"dd",?image:?"http://localhost/images/4.jpg"},108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> ????????????????????{name:?"ee",?image:?"http://localhost/images/5.jpg"},248); line-height:18px"> ????????????????????{name:?"ff",?image:?"http://localhost/images/6.png"}??
????????????????]);??
????????????}??
????????]]>??
????</fx:Script>??
????<s:Group?x="50"?y="50">??
????????<s:List?dataProvider="{datas}"??
????????????????height="400">??
????????????<s:layout>??
????????????????<s:VerticalLayout?paddingBottom="10"???
??????????????????????????????????paddingLeft="10"???
??????????????????????????????????paddingRight="10"??
??????????????????????????????????paddingTop="10"/>??
????????????</s:layout>??
????????????<s:itemRenderer>??
????????????????<fx:Component>??
????????????????????<s:ItemRenderer>??
????????????????????????<s:layout>??
????????????????????????????<s:VerticalLayout?horizontalAlign="center"???
??????????????????????????????????????????????verticalAlign="middle"/>??
????????????????????????</s:layout>??
????????????????????????<s:Label?text="{data.name}"/>??
????????????????????????<mx:Image?source="{data.image}"?width="100"?height="100"/>??
????????????????????</s:ItemRenderer>??
????????????????</fx:Component>??
????????????</s:itemRenderer>??
????????</s:List>??
????</s:Group>??
</s:Application>??

?执行后的效果图：

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

copy

horizontalAlign

"center"

???

??????????????????????????verticalAlign="middle"/>??

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

copy

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"fx:Declarations ??????????
??????????????????????????verticalAlign="middle"
修改List.mxml文件里的List控件代码如下：

copy
1. ????????height="400"??
2. ????????itemRenderer="components.ListItemRenderer"s:VerticalLayout?paddingBottom="10"???
3. ??????????????????????????paddingLeft="10"???
4. ??????????????????????????paddingRight="10"??
5. ??????????????????????????paddingTop="10"s:List 设置List 的属性 itemRenderer 等于自定义的渲染器，执行List.mxml文件，显示结果和之前的一样。 = =!
  
  转载：http://www.voidcn.com/article/p-fcarqmkp-u.html
  
  （编辑：李大同）
  
  【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!