ViewStack示例

 

<?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:layout>
		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
	</s:layout>
	
	<s:Panel title="ViewStack Container" width="600" height="100%"
			 color="0x000000" 
			 borderAlpha="0.15">
		
		<s:layout>
			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
		</s:layout>
		
		<s:Label width="100%" color="0x323232" textAlign="center"
				 text="Use the Button controls to change panels of the ViewStack container."/>
		
		<s:BorderContainer borderStyle="solid" width="100%" color="0x323232">
			
			<s:layout>
				<s:HorizontalLayout horizontalAlign="center"  
									paddingTop="5" paddingLeft="5" 
									paddingRight="5" paddingBottom="5" />
			</s:layout>
			
			<s:Button id="searchButton" label="Search Panel"
					  click="myViewStack.selectedChild=search;"/>
			<s:Button id="cInfoButton" label="Customer Info Panel"
					  click="myViewStack.selectedChild=custInfo;"/>
			<s:Button id="aInfoButton" label="Account Panel"
					  click="myViewStack.selectedChild=accountInfo;"/>
		</s:BorderContainer>
		
		<!-- Define the ViewStack and the three child containers and have it
		resize up to the size of the container for the buttons. -->
		<mx:ViewStack id="myViewStack" borderStyle="solid" 
					  width="100%" height="80%" color="0x323232">
			
			<s:NavigatorContent id="search" label="Search" 
								backgroundColor="0xDCDCDC" 
								width="100%" height="100%" 
								fontWeight="bold" >
				
				<s:layout>
					<s:VerticalLayout horizontalAlign="center"  
									  paddingTop="5" paddingLeft="5" 
									  paddingRight="5" paddingBottom="5" />
				</s:layout>
				
				<s:Label text="Search Panel" />
				<s:HGroup >
					<s:TextInput id="Searchtxt" width="200" />
					<mx:Button label="search" click="Searchtxt.text=''" />
				</s:HGroup>
			</s:NavigatorContent>
			
			<s:NavigatorContent id="custInfo" label="Customer Info" 
								backgroundColor="0xDCDCDC" 
								width="100%" height="100%" 
								fontWeight="bold" >
				
				<s:layout>
					<s:VerticalLayout horizontalAlign="center"  
									  paddingTop="5" paddingLeft="5" 
									  paddingRight="5" paddingBottom="5" />
				</s:layout>
				
				<s:Label text="Customer Info" />
				<s:HGroup>
					<s:Label text="Email Address"/>
					<s:TextInput id="email" width="200"/>
					<s:Button label="Submit" click="email.text='';" />
				</s:HGroup>
			</s:NavigatorContent>
			
			<s:NavigatorContent id="accountInfo" label="Account Info" 
								backgroundColor="0xDCDCDC" width="100%" 
								height="100%" fontWeight="bold" >
				
				<s:layout>
					<s:VerticalLayout horizontalAlign="center"  
									  paddingTop="5" paddingLeft="5" 
									  paddingRight="5" paddingBottom="5" />
				</s:layout>
				
				<s:Label text="Account Info" />
				<s:HGroup>
					<s:Button label="Purchases" />
					<s:Button label="Sales" />
					<s:Button label="Reports" />
				</s:HGroup>
			</s:NavigatorContent>
			
		</mx:ViewStack>
		
	</s:Panel>
	
</s:Application>

 

 

 

例子二：

 

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="14">
	<!--创建效果 -->
	<mx:WipeUp id="myWU" duration="3000"/>
	<mx:WipeDown id="myWD" duration="3000"/>
	<mx:WipeRight id="myWR" duration="3000"/>
	<mx:VBox height="427" backgroundColor="#ffffff">
		<mx:LinkBar dataProvider="{myViewStack}" borderStyle="solid" width="368"/>
		<!-- 定义ViewStack容器,它包含3个子容器 -->
		<mx:ViewStack id="myViewStack" 
					  borderStyle="solid" 
					  width="100%" height="100%" 
					  hideEffect="{myWD}" 
					  showEffect="{myWU}">
			<!-- 子容器1-->
			<mx:HBox id="c1" label="栏目1" height="100%" width="100%"
					 hideEffect="{myWD}" 
					 showEffect="{myWU}">
				<mx:Label text="现在显示为栏目1"/>
			</mx:HBox>
			<!-- 子容器2-->
			<mx:Canvas id="c2" label="栏目2" height="100%" width="100%"
					   hideEffect="{myWD}" 
					   showEffect="{myWU}">
				<mx:Label text="现在显示为栏目2"/>
				<mx:Image x="0" y="45" width="363" height="286">
					<mx:source>
						file:///C| /QQ_L.jpg
					</mx:source>
				</mx:Image>
			</mx:Canvas>
			<!-- 子容器3-->
			<mx:VBox id="c3" label="栏目3" height="100%" width="100%"
					 hideEffect="{myWD}" 
					 showEffect="{myWU}">
				<mx:Label text="现在显示为栏目3"/>
			</mx:VBox>
		</mx:ViewStack>
	</mx:VBox>
</mx:Application>