Flex中List自己定义itemrenderer渲染问题的解决

我们经常需要在List组件中自定义itemrenderer来满足我们同时显示多种内容的要求。比如增加一个CheckBox，这个在itemrenderer里实现很容易。

代码如下：

<?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"><s:layout><s:BasicLayout/></s:layout><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --></fx:Declarations><fx:Script><![CDATA[import mx.collections.ArrayCollection;import mx.events.FlexEvent;[Bindable]private var dataArr:ArrayCollection = new ArrayCollection([{id:0,label:"西瓜"},{id:1,label:"黄瓜"},{id:2,label:"土豆"},{id:3,label:"南瓜"},{id:4,label:"西红柿"},{id:5,label:"韭菜"},{id:6,label:"辣椒"}]);]]></fx:Script><s:List x="90" y="51" width="161" height="71" dataProvider="{dataArr}"itemRenderer="ListItemRenderer" ></s:List></s:Application>

<?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"     autoDrawBackground="true"> <s:layout>  <s:HorizontalLayout verticalAlign="middle"/> </s:layout> <s:CheckBox id="ck" selected="{data.ck}" x="0" y="0"/> <s:Label text="{itemIndex}"/> <s:Label text="{data.label}"/> </s:ItemRenderer>

但有个问题，当我们对List进行数据绑定后，如果数据太多，就会出现滚动条。这时，如果我们选中了第一个CheckBox，如果拖支滚动条的时候，下面的某个项的CheckBox也会被选中。

在网上搜了一些结果后，估计原因是List在滚动的时候，会重用原有的对象，而不是新建。解决办法如下：

在绑定数组对象里加一个Boolean类型的变量，下面为ck

<?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"><s:layout><s:BasicLayout/></s:layout><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --></fx:Declarations><fx:Script><![CDATA[import mx.collections.ArrayCollection;import mx.events.FlexEvent;[Bindable]private var dataArr:ArrayCollection = new ArrayCollection([{id:0,label:"西瓜",ck:true},{id:1,label:"黄瓜",ck:false},{id:2,label:"土豆",ck:false},{id:3,label:"南瓜",ck:false},{id:4,label:"西红柿",ck:false},{id:5,label:"韭菜",ck:false},{id:6,label:"辣椒",ck:false}]);]]></fx:Script><s:List x="90" y="51" width="161" height="71" dataProvider="{dataArr}"itemRenderer="ListItemRenderer" ></s:List></s:Application>

同时，在ItemRenderer中处理一下CheckBox的数据改变事件

<?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" autoDrawBackground="true"><s:layout><s:HorizontalLayout verticalAlign="middle"/></s:layout><fx:Script><![CDATA[import mx.events.FlexEvent;protected function changeHandler(event:Event):void{data.ck = ck.selected;}]]></fx:Script><s:CheckBox id="ck" selected="{data.ck}" x="0" y="0" change="changeHandler(event)"/><s:Label text="{itemIndex}"/><s:Label text="{data.label}"/></s:ItemRenderer>