【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>