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>

效果如下图
[img]http://dl.iteye.com/upload/picture/pic/125594/edd952a8-17b4-3535-99f1-95b5033d7660.jpg[/img]

这时我们需要手动加上滚动条.对于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>

最终效果为
[img]http://dl.iteye.com/upload/picture/pic/125598/c498362f-a28c-3f5d-9afd-24363f6ce9b9.jpg[/img]