itemRenderer的用法

http://www.riafan.com/article/flex/trackback.asp?tbID=151&action=addtb&tbKey=c7afde4f49a1bdad385a0de4d5e97373e12b9e8d

项目渲染器(itemRenderer)是ListBase类列表控件的重要属性，我们在平常工作中会经常自定义项目渲染器以实现该类控件的特殊显示效果。这一次我们将讲述项目渲染器的常见用法。

默认的项目渲染器取决于组件类。TileList 和HorizontalList 类使用TileListItemRenderer；我们可以指定嵌入式、内嵌或自定义项目渲染器，其中嵌入式是主流，我们主要讲述这种方式。

使用项目渲染器一个普遍的问题是状态的保存。很多网友会也这样的经历，拖动指定了图片项目渲染器的List后会出现奇怪错位，或者拖动指定了CheckBox项目渲染器的DataGrid后不能正确保存其状态。这是因为ListBase类列表控件并不是很简单地把数据一次显示。为了提高运行效率，组件在处理数据时，只是创建了适当数量的项目渲染器，来完成显示区域的数据显示。当显示区域发生变化或者拉动滚动条时，组件只是更新项目渲染器的数据。拿List组件来说，如果数据源只有一条数据，显示区域可以同时显示十条，则开始时只创建一个项目渲染器，添加一条数据，再创建一个新的项目渲染器。当数据量超过显示区域的最大值10时，就不再创建新的itemRenderer，而是回收利用现有资源。

明白了这个原理对我们要讲的实例也说很好理解了。点击此处查看本实例的效果，点击此处下载本实例的源码。

显然，为自定义Image控件动态设定值时不能放在creationComplete事件中，因为creationComplete事件只执行一次，可以考虑使用动态绑定、调用dataChange事件或者覆盖set data方法。BindingRenderer.mxml、DataChangeRenderer.mxml和SetDataRenderer.mxml就是使用这几种方法而写的项目渲染器。其中动态绑定方法应该是最简单的。

如果要调整控件位置，则需要覆盖updateDisplayList方法。在MultiIconRenderer.mxml中，我们使用了三个自定义Image控件，而每一行数据并不一定对应三个属性值，此时我们一定要将属性值为空的自定义Image控件的source设定为null来预留其位置，不然拖动滑条会出现位置错乱的现象。当然为了右对齐图标，得讲究一些技巧：如果最右边的自定义Image控件为空，那么它前面的两个自定义Image控件向右移一个horizontalGap，依次移动。当然了，还可以将horizontalGap初始化为0，然后将透明Icon图片留一些空白让控件之间看起来有空隙。

至于怎样在项目渲染器访问主调用应用中的成员，可用Application.application或parentApplication来引用；反过来，主调用应用要访问项目渲染器中的成员，一般都是通过在项目渲染器先派发事件，然后在主调用应用中注册事件侦听器来实现。如MultiIconRenderer.mxml。

所以说，如果控件属性与XML属性一一对应，这种数据结构是合理的，编码简单而且扩展性很好；如果控件属性并不对应XML属性或者它们之间不是一一对应，我们就不得不硬编码了。

更多关于itemRenderer的教程：

• 理解 Flex itemRenderer - 第 1 部分: 内联渲染器
• 理解 Flex itemRenderer - 第 2 部分: 外部渲染器
• 理解 Flex itemRenderer - 第 3 部分: 通信
• 理解 Flex itemRenderer - 第 4 部分: 状态和过渡
• 理解 Flex itemRenderer - 第 5 部分: 效率