Flex：图像在tilelist中切换位置

Question

我在 TileList 内的 itemRenderers 中遇到了一个奇怪的问题。

这是一个没有 itemRenderer 的工作示例：152.org/flex/

这是带有 itemRenderer 的损坏版本：152.org/brokenExample/
（我没有代表将这两个都设为链接）

两个示例都启用了“查看源代码”。

要查看问题，请使用损坏的示例，选择一个相册并向下滚动一行。向后滚动，图像将会切换。如果你在工作示例上尝试一下，那就没问题了。

这似乎是一个众所周知的错误，但我找不到解决方案。

更新
我再次开始玩这个例子并发现了其他东西。事实证明您不必覆盖数据设置器。您可以在 itemRenderer 中创建一个新方法，每当图块想要刷新时就设置该方法。因此，诀窍是不要依赖initialize 或creationComplete 方法。

这就是我在应用程序中的 itemRenderer 的内容。

<itemRenderers:ImageTile img="{data}"/>

这是我在 itemRenderer 中的代码。

public function set img(value:String) : void {
  trace("setting source: " + value);
  this.source = value;
  this.name = value.toString().split("/").pop().split(".").shift();
}

我更新了我的示例以反映此更改。

Answer 1

我手边没有你的应用程序，所以我无法进行端到端测试，但我已经查看了你的源代码。您可能需要覆盖 itemRenderer 中的data setter：

<?xml version="1.0" encoding="utf-8"?>
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">

 <mx:Script>
  <![CDATA[

   override public function set data(value:Object):void
   {
    super.data = value;
    this.source = data;
    this.name = data.toString().split("/").pop().split(".").shift();
   }

   private function init() : void {
    // Removed from your source and transplanted above
   }

  ]]>
 </mx:Script>

</mx:Image>

Flex 将尝试重用列表中的项目渲染器（这意味着您可能期望的生命周期事件——初始化、创建完成等——不会总是触发），因此如果您想确保渲染器在数据项更改时得到更新（就像滚动事件发生时一样），最佳实践是覆盖渲染器的 data 属性。这很可能会解决问题。

Answer 2

也许尝试在创建完成时失效？

根据我对 DataGrids 的回忆（其工作原理与图块列表有些相似），当一个项目成为焦点时，它会重新创建。

<mx:itemRenderer>
  <mx:Image id="myImage" creationComplete="myImage.invalidate()" />
</mx:itemRenderer>

还没有尝试过这段代码，但我认为这是你想要开始寻找的地方。我查看了您的 itemRenderer 组件。尝试creationComplete而不是初始化来调用你的函数