List滚动条可能造成ItemRenderer错位的解决方案

ItemRenderer这种东西很常用，很可惜垂直滚动条拖来拖去(特别是还用上了variableRowHeight)可能造成ItemRenderer的位置不正确，错位或者重叠，这似乎是一个bug了，google半天没啥结果（更可惜的是我没有截图看看，哈）。不单单是List，只要基于ListBase的都有可能。在我自己的案子里，我使用了variableRowHeight=true的List，ItemRenderer是一个VBox，包含了Text和几个Button。每段文字各不相同。

我的案子

原因

说实话我没看过源码也不是非常清楚。flex framework从效率上考虑，ItemRenderer不是一次性全部渲染掉的，比如List只能显示两个ItemRenderer，那只会渲染这两个，如果滚动显示了其它，就会渲染其它的ItemRenderer，这个过程比较复杂，以后有空好好研究下。

方案

既然是滚动条，就从滚动条上下手。List继承自ListBase，ListBase来自ScrollControlBase，ScrollControlBase就是处理滚动特性的基类，它有一个protected方法scrollHandler，是用来处理滚动事件的。下面要做的事情就简单了。只要在scrollHandler函数里加上点东西，来保证ItemRenderer位置正确。很可惜这块的原理我也不是很明确，只是在实验的时候发现RESIZE可以重画List，其实它对应的调用updateList方法（ListBase的protected方法），这样位置就会调整正确了。来看看updateList的注释：

Refreshes all rows now. Calling this method can require substantial processing, because can be expensive at it completely redraws all renderers in the list and won’t return until complete.

看看重新扩展的List

package myvocal.visual
{
	import flash.events.Event;
 
	import mx.controls.List;
	import mx.events.*;
 
	public class MyList extends List
	{
		public function MyList()
		{
			//TODO: implement function
			super();
		}
 
		protected override function scrollHandler(event:Event):void
		{
			trace("onUserScroll")
			super.scrollHandler(event);
			this.updateList()
		}
 
	}
}

搞定！

 

http://gain-loss.org/?p=131

评论

10 楼 ssxszt 2015-10-15  

我是DataGridColumn下内联引用itemRenderer该如何解决啊？

9 楼 baolove456 2011-12-26  

谢谢，问题已解决

8 楼 HBrO 2011-04-01  

折腾了大半天，问题没解决，才发现滚轮事件不知道是截断了事件流还是不算Scroll事件，后来加上Scroll的重写，问题解决

package myvocal.visual
{
import flash.events.Event;

import mx.controls.List;
import mx.events.*;

public class MyList extends List
{
public function MyList()
{
//TODO: implement function
super();
}

protected override function scrollHandler(event:Event):void
{
trace("onUserScroll")
super.scrollHandler(event);
this.updateList()
}

protected override function mouseWheelHandler(event:MouseEvent):void
{
trace("onMouseWheel")
super.mouseWheelHandler(event);
this.updateList()
}


}
}

7 楼 HBrO 2011-04-01  

对于 renzaihangzhou 那种滚动后图片不能显示的问题，通用的解决方案是用VBox+Repeater代替。Tree和List是比较好模拟的，DataGrid就比较困难

6 楼 renzaihangzhou 2011-03-18  

兄弟，我有个问题，困扰我好几天了，跟你发过的这个个帖子里的内容很相似，所以请教你！呵呵，是这样的，我用list+itemrenderer来批量呈现图片，当拖动滚动条后，再拖回来，部分图片就消失了，我猜测是itemrenderer的问题，但是不知道怎么改，想问下你？

5 楼 kings36503 2011-01-05  

这个问题的另一个解决方案是在datagrid的itemrenderer中重写updatePlayList()方法，将你想要的更新上去。

4 楼 xuhuanchao 2010-11-04  

你好，我继承了datagrid，为什么不可以？

datagrid也属性list组件啊

3 楼 Fonkie 2010-09-08  

这个问题我遇到过，当时问了很多人都不知道是怎么回事，后面取消了滚动，楼主厉害！

2 楼 micheal_7 2010-04-16  

正在开发这个项目，遇到了技术难关，楼主的帖子很有用

1 楼 wuxi15932077655 2009-08-15  

哥们谢谢了！　　
我也遇到了这样的问题，昨天就看到你的帖子了不过没有好好看，今天回过头来，尝试了一遍搞定了呵呵