Actionscript 3 火花列表中带有TileLayout的火花图像在Flex应用程序中滚动和拖动时消失
我有一个如下所示的渲染器：Actionscript 3 火花列表中带有TileLayout的火花图像在Flex应用程序中滚动和拖动时消失,actionscript-3,flex4,adobe,mxml,Actionscript 3,Flex4,Adobe,Mxml,我有一个如下所示的渲染器： <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
<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>
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);
});
}
}
使用此方法加载缩略图效果很好。当您滚动列表时，问题就会出现。看到类似的内容时，我的第一个怀疑是“UseVirtualYout”问题。总之，当useVirtualLayout为true（默认值）时，可以重新使用渲染器。当重新使用渲染器时，它可能会确定数据实际上没有更改，并且会错误地渲染图像等内容 我用于确保精确渲染的两种解决方案是： 首先，将useVirtualLayout设置为false。这将防止重新使用渲染器。 其次，重写set data函数并创建自己的私有变量来保存正在显示的数据。这还允许您更轻松地调试数据设置，并确保每次使用/重复使用渲染器时都正确设置数据
最后一个音符。这可能是完全不相关的，但我注意到在更新到Flash Player 10.3后，这个特定的问题发生的频率较低。仅使用您提供的代码，我无法重现问题。。。您能提供事件处理程序的源代码吗（mouseMove似乎是唯一一个我认为可能与滚动冲突的程序）？另外，您是否可以在要绑定到列表的
文件中包含数据样本？我感兴趣的是查看绑定到映像的内容。source属性在列表中将“useVirtualLayout”设置为false修复了它。谢谢DJust找到了一些附加信息。使用Flex4.5.x，也可能更早。创建自定义itemRenderer时，Adobe建议您重写prepare函数。唯一的参数是hasBeenRecycled，这在允许重新使用渲染器时非常有用。
[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";
}
}
}
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);
});
}
}