Flex组件的项目渲染器(ItemRenderer)使用总结

来源：互联网发布：淘宝网时装编辑：程序博客网时间：2024/05/21 14:10

网摘：http://www.ebibi.com/i/study/2011/0217/3118.html

Flex中提供了大量用于数据呈现的组件，这其中，以List系列组件最为常见，使用也最频繁，比如ComBoBox、List、Tree、 TileList、DataGrid等等。这些组件有一个共同的特性，那就是支持自定义itemRenderer，这个功能非常强大，能够帮助我们实现很多实用的功能.

项目渲染器（ItemRenderer）是ListBase类列表控件的重要属性，我们在平常工作中会经常自定义项目渲染器以实现该类控件的特殊显示效果。

默认的项目渲染器取决于组件类。TileList 和 HorizontalList 类使用 TileListItemRenderer；List 类使用 ListItemRenderer。DataGrid 类使用 DataGridColumn 中的 DataGridItemRenderer。

什么是itemRenderer?
itemRenderer，可以理解为数据的表现方式，具体地说，是指显示每一条数据时采用的形式。在使用数据处理类组件时，我们只需要把数据按照一定的格式组织好，然后赋予给组件，剩下的事就不用费心了。
每一个组件都有默认的itemRenderer，比如List组件：
List组件默认的itemRenderer类似Label组件，只简单显示一行文本。如右图所示，红色方框选中的是一个itemRenderer。
本质上，itemRenderer和其它容器类组件没有区别，里面可以包括任意的可视化元素，包括文本、图片、视频等，只要是Flex支持的视觉元素，都可以。

自定义itemRenderer
组件默认的itemRenderer都过于简单，如果想加强表现力，就必须创建个性化的itemRenderer。
自定义itemRenderer有两种方式：一种是嵌入式，直接写在组件的标签中，所有的代码都集中在一个MXML文件中；另一种是把itemRenderer独立出来，形成一个MXML组件或ActionScript类。

看下面图片，我用TileList控件的自定义ItemRenderer实现的效果:

代码说明：

先自定义一个名称为:itemh的MXML

<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="145" height="41" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:VBox width="40" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image click="this.parentDocument.imgclick(event)" data="{data.label}" source="assets/tx.JPG" width="40"/> </mx:VBox> <mx:VBox width="95" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Label text="{data.label}" toolTip="{data.label}" /> <mx:Image toolTip="点我查看视频" buttonMode="true" source="assets/camera.JPG" width="16" height="20" /> </mx:VBox> </mx:HBox>

主调用应用中:

<mx:ArrayCollection id="arrColl_keySetup"> <mx:source> <mx:Array id="arr_keysetup"> <mx:Object data="00" sel="false" label="aaa"/> <mx:Object data="11" sel="false" label="bbb"/> <mx:Object data="22" sel="true" label="ccc"/> </mx:Array> </mx:source> </mx:ArrayCollection> <mx:TileList id="tlist" maxColumns="1" dataProvider="{arrColl_keySetup}" itemRenderer="itemh" x="34" y="10" width="148"> </mx:TileList>