Flex之旅：第二部分：容器与布局(6)---在容器中滚动到某个指定的子组件

页面与内容之间，肯定存在着，页面框架大小已经固定，而框架里面的内容是很多，超出框架大小的情况。

这样一来，就需要控制当前页面，滚动到具体的某个内容上，显示出来。

设定，这两个值，可以控制横向滚动和纵向滚动的位置：

mx.core.Container.verticalScrollPosition():Number

mx.core.Container.horizontalScrollPosition():Number

下面看例子：

<?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" width="800"
			   height="600">
	<mx:Canvas id="c">
		<fx:Script>
			<![CDATA[
				private function showScrollValue():void{
					trace(vbox.verticalScrollPosition+" "+vbox.horizontalScrollPosition);
				}
				
				private function changeScrollToShowChild():void
				{
					vbox.verticalScrollPosition =
						(returnChildrenHeights((comboBox.selectedItem as Number))) - vbox.height;
				}
				
				private function returnChildrenHeights(index:int):Number
				{
					var i:int = 0;
					var sumHeight:Number = 0;
					while(i<index) {
						sumHeight += vbox.getChildAt(i).height;
						i++;
					}
					return sumHeight;
				}
			]]>
		</fx:Script>
		<mx:ComboBox id="comboBox" change="changeScrollToShowChild()">
			<mx:dataProvider>
				<fx:Array>
					<fx:Number>1</fx:Number>
					<fx:Number>2</fx:Number>
					<fx:Number>3</fx:Number>
					<fx:Number>4</fx:Number>
					<fx:Number>5</fx:Number>
				</fx:Array>
			</mx:dataProvider>
		</mx:ComboBox>
		<mx:VBox width="650" height="300" id="vbox"
				 backgroundColor="#00ffff" y="50" verticalScrollPolicy="on"
				 scroll="showScrollValue()" paddingLeft="50" verticalGap="0">
			<mx:Panel height="150" width="550">
				<mx:LinkButton label="First"/>
			</mx:Panel>
			<mx:Panel height="160" width="550">
				<mx:LinkButton label="Second"/>
			</mx:Panel>
			<mx:Panel height="110" width="550">
				<mx:LinkButton label="Third"/>
			</mx:Panel>
			<mx:Panel height="150" width="550">
				<mx:LinkButton label="Fourth"/>
			</mx:Panel>
			<mx:Panel height="130" width="550">
				<mx:LinkButton label="Fifth"/>
			</mx:Panel>
		</mx:VBox>
	</mx:Canvas>
	
</s:Application>

几点说明：

• VBox.verticalScrollPolicy 开启 on，让VBox，当里面的内容超出了VBox长宽之后，会出现滚动条
• ComboBox的选中的值作为参数，VBox以此index作为起点，计算其后面所有children的高度之和
  
• 高度之和 - VBox本身的高度，就是算出VBox要滚动的位置，就可以让具体某个子内容（panel）显示出来。
  
• VGroup 我还没有研究明白，没有verticalScrollPolicy 这个属性，不知道用什么代替呢。