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