Flex的一点入门经验(7)--spark组件的滚动条

在原来的mx组件中,如果子元素大小超过了container的大小,是会出现滚动条的,
但是spark的组件默认情况下则让子元素超出了container的范围.
比如这个文件

  <?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" 
			   minWidth="955" minHeight="600">
	
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
		
	<s:VGroup width="200" height="100">
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
	</s:VGroup>
	
	<s:BorderContainer width="200" height="100">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
	</s:BorderContainer>
	
	<mx:VBox width="200" height="100" borderColor="red" borderStyle="solid">
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		
	</mx:VBox>
	
 </s:Application>
 

效果如下图


这时我们需要手动加上滚动条.对于group这样实现了IViewport的来说,直接用Scroller包装一下,
而对于skinnable Spark container,需要编写使用了滚动条的皮肤文件

 <s:Scroller width="200" height="100">
		
		<s:VGroup>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
			<s:Label text="this is a label"/>
		</s:VGroup>
	</s:Scroller>
	
	<s:BorderContainer width="200" height="100" skinClass="com.crap.skin.CrapSkin">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
		<s:Label text="this is a label"/>
	</s:BorderContainer>

CrapSkin.mxml内容为

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.BorderContainer")]
	</fx:Metadata>
	
	<!-- states -->
	<s:states>
		<s:State name="disabled" />
		<s:State name="normal" />
	</s:states>
	
	<s:Scroller height="100%" width="100%" top="1" left="1" right="1" bottom="1">    
		<s:Group id="contentGroup">
			<s:layout>
				<s:BasicLayout/>
			</s:layout>
		</s:Group>
	</s:Scroller>
	
	<s:Rect left="0" right="0" top="0" bottom="0">
		<s:stroke>
			<s:SolidColorStroke color="0x000000" weight="1"/>
		</s:stroke>
	</s:Rect>
</s:Skin>

最终效果为