Flex中定义和使用渲染器的方式

这篇文章主要讲解了“Flex中定义和使用渲染器的方式”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Flex中定义和使用渲染器的方式”吧！

Flex中使用渲染器(ItemRenderer)

Flex渲染器使用非常频繁，可以让用户自行定义数据的显示格式，做过.NET开发的朋友我想都知道数据控件中的ItemTemplate，我个人认为Flex中的Flex渲染器和.NET中的ItemTemplate从功能上来说相差不大，在Flex要显示特定的格式完全可以通过Flex渲染器来自定义。

在《使用TileList+TitleWindowt组件开发聊天表情功能》这文章里其实就已经用到了Flex渲染器，只是没有专们提出来介绍，这里使用的是内部ItemRenderer，除此之外我们还可以使用外部ItemRenderer。故名思意内部ItemRenderer就是直接嵌套在Flex内部的，外部Flex渲染器则是将要显示的效果通过外部组件或是外部类来进行定义开发。

<mx:TileListxmx:TileListx="0"y="0"width="100%"height="100%"id="faceList" dataProvider="{faceArray}"itemClick="onItemClick(event)"> <mx:itemRenderer> <mx:Component> <mx:Imagesourcemx:Imagesource="{data.ImageUrl}"/> </mx:Component> </mx:itemRenderer> </mx:TileList>

如上则是使用的内部ItemRenderer，通过<mx:itemRenderer>和<mx:Component>在Flex组件的内部定义项目渲染器（ItemRenderer）。如果想使用外部Flex渲染器的方式实现呢，则需要定义一个外部Flex渲染器,将Renderer的格式在自定义的类或组件中去实现，如下：

package  {  importmx.core.UIComponent;   publicclassFaceRendererextendsUIComponent  {  privatevarimageUrl:Image;   publicfunctionFaceRenderer()  {  super();  }   protectedoverridefunctioncreateChildren():void  {  imageUrl=newImage();  }   protectedoverridefunctioncommitProperties():void  {  super.commitProperties();  imageUrl.source=data.ImageUrl;  }  }  }

在Flex组件中通过Flex渲染器属性引用自定义的外部渲染器就OK了。

<mx:TileListxmx:TileListx="0"y="0"width="100%"height="100%"id="faceList" dataProvider="{faceArray}" itemClick="onItemClick(event)" itemRenderer="FaceRenderer"> </mx:TileList>

感谢各位的阅读，以上就是“Flex中定义和使用渲染器的方式”的内容了，经过本文的学习后，相信大家对Flex中定义和使用渲染器的方式这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！