Flex4 ViewStack使用

下面是显示两个View的ViewStack

使用ButtonBar设置View切换

<?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"
			   xmlns:views="views.*" 
			   creationComplete="init()">
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.IndexChangedEvent;
			
			protected function init():void  
			{
				stack.addEventListener(IndexChangedEvent.CHANGE,Stack_ItemChanged_Call);
			}
			
			protected function Stack_ItemChanged_Call(event:IndexChangedEvent):void
			{
				var related:Object = event.relatedObject;
				Alert.show(" Old Index:"+event.oldIndex.toString()+"\n New Index:"+
					event.newIndex.toString()+"\n Label:"+related.label);
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
	</fx:Declarations>
	<s:Panel id="mix" verticalCenter="0" horizontalCenter="0" title="Mix" width="450" height="300">
		<!--使用默认设定-->
		<s:ButtonBar dataProvider="{stack}"/>
		<mx:ViewStack id="stack" x="20" y="20" width="400" height="200">
			<views:TVView label="TV"/>
			<views:ComputerView label="Computer"/>
		</mx:ViewStack>
	</s:Panel>
</s:Application>

 手动设置实现View切换

<?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"
			   xmlns:views="views.*"
			   creationComplete="init()">
	
	<fx:Script>
		<![CDATA[
			
			import mx.controls.Alert;
			import mx.events.IndexChangedEvent;
			
			protected function init():void  
			{
				Cmd_Tv.addEventListener(MouseEvent.CLICK,Cmd_Tv_Clicked_Call);
				Cmd_Com.addEventListener(MouseEvent.CLICK,Cmd_Com_Clicked_Call);
				stack.addEventListener(IndexChangedEvent.CHANGE,Stack_ItemChanged_Call);
			}
			
			protected function Stack_ItemChanged_Call(event:IndexChangedEvent):void
			{
				var related:Object = event.relatedObject;
				Alert.show(" Old Index:"+event.oldIndex.toString()+"\n New Index:"+
					event.newIndex.toString()+"\n Label:"+related.label);
			}
			
			protected function Cmd_Tv_Clicked_Call(event:Event):void
			{
				// 通过结点设定
				stack.selectedChild =TVstack ;
				// 通过索引设定
				stack.selectedIndex = 0;
			}
			
			protected function Cmd_Com_Clicked_Call(event:Event):void
			{
				stack.selectedChild =Comstack ;
				stack.selectedIndex = 1;
			}
		]]>
	</fx:Script>
	<fx:Declarations>
	</fx:Declarations>
	<s:Panel id="mix" verticalCenter="0" horizontalCenter="0" title="Mix" width="450" height="300">
		<s:layout>
			<s:VerticalLayout paddingLeft="20" paddingRight="20" paddingTop="10"/>
		</s:layout>
		<s:HGroup>
			<s:Button label="TV" id="Cmd_Tv"/>
			<s:Button label="Com" id="Cmd_Com"/>
		</s:HGroup>
		
		<mx:ViewStack id="stack" width="400" height="200">
			<views:TVView id="TVstack" label="TV"/>
			<views:ComputerView id="Comstack" label="Computer"/>
		</mx:ViewStack>
	</s:Panel>
</s:Application>

 使用的两个VIew如下

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent 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="100%" height="100%">

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Panel title="TVs" width="100%" height="100%">
		<s:layout>
			<s:VerticalLayout paddingTop="20" paddingBottom="20" paddingLeft="20" paddingRight="20"/>
		</s:layout>
		<s:Group width="100%" enabled="false">
			<s:TextInput width="100%"/>
			<s:Button label="Search for channel"/>
		</s:Group>
		<s:Line width="100%"/>
		<s:Spacer height="10"/>
		<s:Label text="There are no channels avaiable."/>
	</s:Panel>
</s:NavigatorContent>

 

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent 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="100%" height="100%">
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Panel title="Computer" width="100%" height="100%">
		<s:layout>
			<s:VerticalLayout paddingTop="20" paddingBottom="20" paddingLeft="20" paddingRight="20"/>
		</s:layout>
		<s:Group width="100%" enabled="false">
			<s:TextInput width="100%"/>
			<s:Button label="Search for IBM Machine"/>
		</s:Group>
		<s:Line width="100%"/>
		<s:Spacer height="10"/>
		<s:Label text="You can't afford a IBM..."/>
	</s:Panel>
</s:NavigatorContent>