Flex 4垂直滾動條（vertical Scroll Bar）居左-雙Scroller

在實際開發中常常會遇到要把垂直滾動條 （verticalScrollBar）居左的情況，但是在Flex4中實現沒有像Flex3中那么方便。Flex3只需重寫容器的 validateDisplayList方法，再在方法里進行verticalScrollBar.x=0的設置；Flex4中本人至今沒有找到一個比較 好的方法來解決此問題，只能先用一個看着比較糾結的方法了——雙滾動條。

　　“雙滾動條”的原理很簡單。建一個輕量且與原容器“高度變化相同（用 綁定）”，寬度只須放得下垂直滾動條。新容器套上滾動條並放於原容器之上且居左。設置原容器verticalScrollPolicy="off"且 verticalScrollPosition="{新容器.verticalScrollPosition}"。這樣一來原容器有的滾動條沒有顯示出 來，但它會和新容器一起滾動，因為verticalScrollPosition值進行了綁定，看上去就好像是垂直滾動條居左了。

例子代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			  xmlns:s="library://ns.adobe.com/flex/spark" 
			  xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:HSlider id="slider" maximum="700" minimum="300" width="300"/>
	<s:Scroller id="hide_scroller" y="15" verticalScrollPolicy="off" horizontalScrollPolicy="off">
		<s:Group id="real_group" y="15" width="300" height="200"
				verticalScrollPosition="{fake_group.verticalScrollPosition}">
			<s:Rect id="rect" width="300" height="{slider.value}">
				<s:fill>
					<s:LinearGradient rotation="90">
						<s:GradientEntry color="#DD0000"/>
						<s:GradientEntry color="#00DD00"/>
						<s:GradientEntry color="#0000DD"/>
					</s:LinearGradient>
				</s:fill>
			</s:Rect>
		</s:Group>
	</s:Scroller>
	<s:Scroller y="15" x="-15" id="show_scroller" horizontalScrollPolicy="off">
		<s:Group id="fake_group" y="15" width="15" height="{real_group.height}">
			<s:Group height="{rect.height}"/>
		</s:Group>
	</s:Scroller>
</s:Application>