滚动时网格itemrenderer混乱

Posted 2023-02-22

【中文标题】滚动时网格itemrenderer混乱

【英文标题】：Grid itemrenderer messup while scrolling

【发布时间】：2015-12-10 07:53:09

【问题描述】：

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

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

而ItemRenderer Datagrid 是这样的：

<s:DataGrid id="cDataGrid"   editable="true" >
<s:columns>
 <mx:ArrayList>
  <mx:source>
    <s:GridColumn  headerText="Name" dataField="name" editable="false"/>
    <s:GridColumn  headerText="class" dataField="class" editable="false" />
    <s:GridColumn  headerText="age" dataField="age" editable="true"/>
    <s:GridColumn  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"   buttonMode="true" horizontalCenter="0" verticalCenter="0" />
</s:GridItemRenderer>

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

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

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

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

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

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

编辑：

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

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

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

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

【问题讨论】：

如果我理解正确：用else if(data.age >= 18)替换else

可能的 itemRenderer 回收问题？ http://***.com/questions/22308385/flex-datagrid-row-color-spreads-when-scrolled-up-down

我在阅读这个问题时遇到了麻烦；我不确定你是什么意思。 imgStatus 图标是否应该存在于每一行？你的代码说它应该，但你的问题暗示它不应该。或者滚动时某些行的图标颜色是否错误？最后——你能发一个MCVE吗？

@user2836288 如果大于 18 则正确，否则为绿色。

我认为您不了解项目渲染器。当您滚动时，您不会摆脱从屏幕上滚动的线条并创建在屏幕上滚动的新线条——您是从顶部取出一个并将其移动到底部，并在其上设置新值.因此，如果您没有“else”子句，您并不是在说“什么都不放在那里”，您实际上是在说“留下任何已经存在的东西”。

【参考方案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;

【讨论】：

我试过了，但不能解决我的问题。而且我还没有明确定义图标。我只是不给图像来源，所以它保持空白。我尝试了此解决方案以使其他内容可见错误。但是还是有问题。我在我的问题中添加了图片看起来如何。