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>

这样就没有问题了。大家可以试试。