Flex4中 超出容器边界的子项没有隐藏

在flex4中，因为必须添加<s:Scroller/>标签才能出现滚动条，所以如果如果一个容器例如Panel没有添加滚动条，那么添加到Panel中的child的位置如果超出了Panel的边界，那么这个child就不会隐藏。

 

如果不想添加滚动条，并且让子类在超出边界时隐藏掉，只要在给容器设置layout并且设置layout的clipAndEnableScrolling为true即可。

例子：

<?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"
			   currentState="show">
	<fx:Declarations>
		<s:Sine id="sineEasing"
				easeInFraction="0.3"/>
		<s:Move id="hideMove" target="{targetBox}" xTo="{-200}" duration="1000" easer="{sineEasing}" effectEnd="{currentState = 'hide'}"/>
		<s:Move id="showMove" xTo="0" duration="1000" target="{targetBox}" effectEnd="{currentState = 'show'}"/>
		
	</fx:Declarations>
	<s:states>
		<s:State name="show"/>
		<s:State name="hide"/>
	</s:states>
	<s:Panel title="Move Effect Example" 
			 id="testPanel"
			 x="100"
			 width="75%" height="75%">
		<s:layout>
			<s:BasicLayout clipAndEnableScrolling="true"/>
		</s:layout>
			<s:VGroup id="targetBox" width="50%">
				<s:HGroup>
					<s:Panel title="test move" width="200" height="200" id="testpanel">
						<s:TextArea text="clipContent值:True：当子项目的边界超出此容器时，不显示子项目在此容器中。Flase：当子项目的边界超出此容器时，显示子项目在此容器中。"/>
					</s:Panel>
					<s:Button height="200" 
							  width="40"
							  click.show="{hideMove.play()}"
							  click.hide="{showMove.play()}"/>	
				</s:HGroup>
			</s:VGroup>
	</s:Panel>
</s:Application>