flex_ViewStack导航容器示例；

=》TVView.mxml自定义组件

<?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%">
    
    <!--view-->
    <s:Panel title="电视" width="100%" height="100%">
        <s:layout>
            <s:VerticalLayout paddingLeft="20" paddingTop="20" paddingRight="20" paddingBottom="20"/>
        </s:layout>
        
        <s:HGroup width="100%" enabled="false">
            <s:TextInput id="searchfield" width="100%"/>
            <s:Button id="searchBtn" label="Search for TVs"/>
        </s:HGroup>
        
        <s:Line width="100%">
            <s:stroke>
                <s:SolidColorStroke color="0x000000" weight="1" caps="square"/>
            </s:stroke>
        </s:Line>
        
        <s:Spacer height="10"/>
        <s:Label text="搜索结果：抱歉！没有搜到这类型、款式的电视的相关信息！" fontWeight="bold" fontSize="16"/>
    </s:Panel>
    
</s:NavigatorContent>

=》Computer.mxml自定义组件

<?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%">
    
    <!--view-->
    <s:Panel title="计算机(电脑)" width="100%" height="100%">
        <s:layout>
            <s:VerticalLayout paddingLeft="20" paddingTop="20" paddingRight="20" paddingBottom="20"/>
        </s:layout>
        
        <s:HGroup width="100%" enabled="false">
            <s:TextInput id="comSearch" width="100%"/>
            <s:Button id="comBtn" label="Search for Computer"/>
        </s:HGroup>
        
        <s:Line width="100%">
            <s:stroke>
                <s:SolidColorStroke color="0x000000" weight="1" caps="square"/>
            </s:stroke>
        </s:Line>
        
        <s:Spacer height="10"/>
        <s:Label text="搜索结果：抱歉！没有搜到要查找的计算机类型信息！" fontWeight="bold" fontSize="16"/>
    </s:Panel>
</s:NavigatorContent>

=》ViewStack.mxml应用程序

<?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:ViewStack="learns.ViewStack.*"
               minWidth="1024" minHeight="768" pageTitle="ViewStack导航容器示例">
    
    <!-- Demo_ViewStack导航容器示例 -->
    
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingRight="20" paddingTop="10" />
    </s:layout>
    <fx:Script>
        <![CDATA[
            import mx.events.IndexChangedEvent;
            
            protected function stack_changeHandler(event:IndexChangedEvent):void
            {
                // 获取切换到的容器：
                var relatedgroup:Object = event.relatedObject;
                
                // 打印日志：
                trace("=1>Old index: " + event.oldIndex + "; \n=2>New index: " + event.newIndex + "; \n" +
                    "=3>Label of new selection: " + relatedgroup.label + ";");
            }
            
        ]]>
    </fx:Script>
    
    <!--view-->
    <s:ButtonBar dataProvider="{stack}"/>
    
    <mx:ViewStack id="stack" width="650" height="200" change="stack_changeHandler(event)">
        <ViewStack:TVView label="购买电视" />
        <ViewStack:ComputerView label="购买电脑" />
    </mx:ViewStack>
    
</s:Application>