带有 TileLayout 的火花列表中的火花图像在 Flex 应用程序中滚动和拖动时消失

Question

我有一个看起来像这样的渲染器：

<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:Group width="160" toolTip="{data.toolTip}" doubleClickEnabled="true">
        <s:layout>
            <s:VerticalLayout gap="5" horizontalAlign="center"
                              paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2"/>
        </s:layout>
        <mx:Canvas width="156" height="156" borderStyle="solid" borderColor="#AAAAAA"
                   verticalScrollPolicy="off" horizontalScrollPolicy="off">
            <mx:Image id="image" source="{data.thumbnail}" width="{data.thumbwidth}" height="{data.thumbheight}"
                      horizontalCenter="0" verticalCenter="0"/>
        </mx:Canvas>
        <s:Label text="{data.data.name}" maxDisplayedLines="2" textAlign="center" 
                 width="100%"/>
    </s:Group>
</s:ItemRenderer>

在一个看起来像这样的列表中

<s:List id="fileIconView"
    dataProvider="{files}"
    width="100%" height="100%"
    borderVisible="false"
    dragEnabled="true" 
    allowMultipleSelection="true" 
    doubleClickEnabled="true"
    mouseDown="fileIconViewMouseDown(event)"
    mouseMove="fileIconViewMouseMove(event)"
    mouseUp="clearSelectionRectangle()"
    change="fileSelectionChanged()"
    itemRenderer="view.ThumbnailRenderer">
    <s:layout>
        <s:TileLayout clipAndEnableScrolling="true" />
    </s:layout>
</s:List>

当我滚动列表中的图像时，它们会消失。我该如何解决这个问题？

当我拖动其中一个时也会发生同样的情况，但我通过在拖动完成或取消时重新生成列表来（部分）修复了这个问题。

美国东部时间 2011 年 7 月 11 日下午 2:02 更新 发送到渲染器的数据对象如下所示

[Bindable]
public class FileWrapper
{
    /** file that wrapper holds, File, OnlineDocument and SymbolicLinks */
    public var data:*;

    /** file size */
    public var size:String;

    /** file's author */
    public var author:String;

    /** file's created date */
    public var date:String;

    /** tooltip for the file  */
    public var toolTip:String;

    /** image */
    public var img:String;

    /** thumbnail source */
    public var thumbnail:Object;

    /** width of thumbnail image */
    public var thumbwidth:int;

    /** height of thumbnail image */
    public var thumbheight:int;

    /** folder with mime type icons */
    public const MIME_ICONS_FOLDER:String = "fileexplorer/mimeTypeIcons/";

    public function FileWrapper(file:*, controller:FileExplorerController)
    {
        this.data = file;

        if (file is File) {
            var f:File = file as File;
            this.size = NumberUtils.humanReadableBytes(f.latestRevision.sizeOnDisk);
            this.author = f.latestRevision.author.displayName;
            this.date = NumberUtils.formatDate(f.latestRevision.timeUploaded);
            this.toolTip = f.name + "\n" +"Size: " + this.size
                + "\n" + "Type: " + f.latestRevision.mimeType;
            this.img = MIME_ICONS_FOLDER+getMimeTypeIcon(f.latestRevision.mimeType);

            var self:FileWrapper = this;
            controller.getThumbnail(f.latestRevision,
                function (tumbnailBitmap:Object):void
                {
                    self.thumbnail = tumbnailBitmap;
                    self.thumbwidth = tumbnailBitmap.width;
                    self.thumbheight = tumbnailBitmap.height;
                });
        }
        else if(file is OnlineDocument) {
            this.toolTip = file.name + "\nOnline Document";
            this.img = MIME_ICONS_FOLDER+"OnlineDocument.png";
        }
        else if(file is SymbolicFileLink) {
            this.toolTip = file.name + "\nShortcut";
            this.img = MIME_ICONS_FOLDER+"System-Shortcut-icon.png";
        }
        else {
            this.size = "";
            this.author = "";
            this.date = "";
            this.toolTip = "Unknown File Type";
            this.img = MIME_ICONS_FOLDER+"Unknown.png";
        }
        this.thumbnail = this.img;
        this.thumbwidth = 32;
        this.thumbheight = 32;
    }

    /**
     * Gets the icon image for the given mime type
     * 
     * @param mime type string
     * @return image name string
     */
    protected static function getMimeTypeIcon(mimeType:String):String
    {
        switch (mimeType) {
            case "application/msword":
                return "File-doc.png";
            case "application/octet-stream":
                return "System-binary.png";
            case "application/ogg":
                return "Audio-ogg.png";
            case "application/pdf":
                return "File-pdf.png";
            case "application/vnd.ms-excel":
                return "File-xls.png";
            case "application/vnd.ms-powerpoint":
                return "File-ppt.png";
            case "application/x-bzip2":
                return "Archive-zip.png";
            case "application/x-gtar":
                return "Archive-tar.png";
            case "application/x-gzip":
                return "Archive-gzip.png";
            case "application/x-tar":
                return "Archive-tar.png";
            case "application/xhtml+xml":
                return "File-html.png";
            case "application/zip":
                return "Archive-zip.png";
            case "audio/x-mpegurl":
                return "Audio-mp3.png";
            case "audio/mpeg":
                return "Audio-mp3.png";
            case "audio/x-aiff":
                return "Audio-aiff.png";
            case "audio/x-wav":
                return "Audio-wav.png";
            case "image/bmp":
                return "Image-bmp.png";
            case "image/gif":
                return "Image-gif.png";
            case "image/jpeg":
                return "Image-jpg.png";
            case "image/png":
                return "Image-png.png";
            case "image/tiff":
                return "Image-bmp.png";
            case "text/html":
                return "File-html.png";
            case "text/plain":
                return "File-txt.png";
            case "application/vnd.oasis.opendocument.presentation":
                return "Presentation.png";
            case "application/vnd.oasis.opendocument.spreadsheet":
                return "Spreadsheet.png";
            case "application/vnd.oasis.opendocument.text":
            case "text/richtext":
                return "Text.png";
            case "text/xml":
                return "Text.png";
            case "video/mpeg":
                return "Video-mpeg.png";
            case "video/quicktime":
                return "Video-movie.png";
            case "video/vnd.mpegurl":
                return "Video-mpeg.png";
            case "video/x-msvideo":
                return "Video-avi.png";
            case "video/x-sgi-movie":
                return "Video-movie.png";
            default:
                return "System-default.png";
        }
    }
}

controller.getThumbnail 方法只是调用这个模型方法

public function getThumbnail(revision:Revision, callBack:Function):void
{
    // only for image revisions
    if (revision.mimeType.indexOf("image") > -1) {
        var loader:Loader = new Loader();
        // create request
        var urlVars:URLVariables = new URLVariables();
        urlVars.authToken = userAccountModel.token;
        urlVars.id = revision.id;
        var req:URLRequest = new URLRequest(THUMBNAIL_URL);
        req.data = urlVars;

        var context:LoaderContext = new LoaderContext(true);
        loader.load(req, context);
        // set load handler
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
            function(event:Event):void
            {
                callBack(event.currentTarget.content);
            });
    }
}

使用此方法加载缩略图效果很好。滚动列表时会出现此问题。

Answer 1

当我看到这样的事情时，我的第一个怀疑是“useVirtualLayout”问题。总而言之，当 useVirtualLayout 为 true（默认值）时，可以重用渲染器。当渲染器被重用时，它可能会认为数据实际上并没有改变，并且会错误地渲染图像等内容。

我用来确保准确渲染的两种解决方案是： 首先，将 useVirtualLayout 设置为 false。这可以防止重复使用渲染器。 其次，覆盖 set data 函数并创建您自己的私有变量来保存您正在显示的数据。这也将使您能够更轻松地调试数据设置，并确保每次使用/重用渲染器时都正确设置数据。

最后一点。这可能完全不相关，但我注意到在更新到 Flash Player 10.3 后，这个特定问题发生的频率降低了。