滚动时网格itemrenderer混乱

Question

我有一个列表，其中 Datagrid 为 itemRenderer，例如：

<s:List id="cList" itemRenderer="views.renderers.DGridItemRenderer" 
                    dataProvider="{sList}" useVirtualLayout="false"/>

而ItemRenderer Datagrid 是这样的：

<s:DataGrid id="cDataGrid" width="100%" height="100%" editable="true" >
<s:columns>
 <mx:ArrayList>
  <mx:source>
    <s:GridColumn width="40" headerText="Name" dataField="name" editable="false"/>
    <s:GridColumn width="40" headerText="class" dataField="class" editable="false" />
    <s:GridColumn width="60" headerText="age" dataField="age" editable="true"/>
    <s:GridColumn width="60" headerText="SLight" editable="false" itemRenderer="views.renderers.SLColorStatusRenderer"/>
  </mx:source>
  </mx:ArrayList>
 </s:columns>   
</s:DataGrid>

现在Slight gridColumn 有以下GridItemRenderer 有图标：

<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" verticalCenter="0" clipAndEnableScrolling="true">

    <fx:Script>
    <![CDATA[

    override public function prepare(hasBeenRecycled:Boolean):void {

    if(data.age < 18 && data.age > 0)
    {
      imgStatus.source = ImageProvider.redIcon;
    }
    else if(data.age >= 18)     
    {
      imgStatus.source = ImageProvider.greenIcon;   
    }        

  ]]>
  </fx:Script>
   <s:Image id="imgStatus" width="21" height="21" buttonMode="true" horizontalCenter="0" verticalCenter="0" />
</s:GridItemRenderer>

SLight 列包含的红色/绿色图标取决于年龄数据。年龄值应该在数据网格中是可编辑的。

如果年龄小于 18 则为红色，否则为绿色图标。

现在，我的问题是当我滚动 datagid 时，图标会混乱。无论有没有年龄，图标都会显示在任何记录中。

第一次加载时，所有图标看起来都不错。但是当我滚动时，只会弄乱图标并更改它们的位置。

我将useVirtualLayout="false" 用于列表，clipAndEnableScrolling="true" 用于itemrenderer，但我仍然无法解决它。

我找到了很多，但没有得到任何合适的解决方案。

编辑：

如果年龄小于 18 岁则为红色，否则如果年龄大于 18 岁则为绿色。否则，如果未定义年龄，则为空白。

我的问题是当我滚动时，空白行也会显示图标。红色图标行将随机变为绿色，绿色变为红色。乱七八糟的。

首先它显示如下。 （没错）：

当我滚动数据网格后，它变为以下。 （不正确）

Answer 1

您的问题是您没有正确处理 itemrenderer 回收，因为 age 并不总是设置。如果您的数据始终具有 age 值，您会没事的。事实上，您的代码无法清除 imgStatus 对象——如果 age 是 null 或 -1，它只会留下已经存在的任何图标。

将您的代码更改为以下内容：

if(data.age < 18 && data.age > 0)
{
    imgStatus.source = ImageProvider.redIcon;
    imgStatus.visible = true;
}
else if(data.age >= 18)     
{
    imgStatus.source = ImageProvider.greenIcon;   
    imgStatus.visible = true;
}
else
{
    //You could use the following line instead if you have a "clear icon" defined.
    //imgStatus.source = ImageProvider.clearIcon;
    imgStatus.visible = false;
}