名称 描述
Accordion Accordion 容器定义一个子面板序列, 但一次仅显示一个面板。 若要导航容器, 用户会单击与他们需要访问的子面板相对应的导航按钮。 使用 Accordion 容器, 用户可以按任何顺序访问子面板以在表单中前后移动。
TabNavigator TabNavigator 容器创建和管理一组选项卡, 使用它们可在其子级中间导航。 TabNavigator 容器的子级是其他容器。 TabNavigator 容器为每个子级创建一个选项卡。 当用户选中某个选项卡时, TabNavigator 容器会显示相关联的子级。
ViewStack ViewStack 导航器容器由彼此堆叠在一起的子容器的一个集合组成, 一次只有一个容器是可见的或活动的。 ViewStack 容器不为用户定义切换当前活动容器的内置机制；您必须使用 LinkBar、TabBar、ButtonBar 或 ToggleButtonBar 控件或自己在 ActionScript 中构建逻辑让用户来更改当前活动的子级。


示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    width="550" height="550"
    viewSourceURL="src/NavigationContainers/index.html"
>
    <mx:Panel
        layout="absolute"
        left="10" top="10" right="10" bottom="10" title="Navigators"
    >
        <mx:Accordion width="47.5%" height="200" top="36" left="10">
            <mx:Canvas label="Navigation button 1" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 1"/>
            </mx:Canvas>
            <mx:Canvas label="Navigation button 2" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 2"/>
            </mx:Canvas>
            <mx:Canvas label="Navigation button 3" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 3"/>
            </mx:Canvas>
        </mx:Accordion>
        
        <mx:TabNavigator right="10" width="47.5%" height="200" y="36">
            <mx:Canvas label="Tab 1" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 1"/>
            </mx:Canvas>
            <mx:Canvas label="Tab 2" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 2"/>
            </mx:Canvas>
            <mx:Canvas label="Tab 3" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 3"/>
            </mx:Canvas>
        </mx:TabNavigator>

        <mx:ViewStack
            id="myViewStack"
            width="47.5%" height="200" right="10" bottom="10"
            borderColor="#000000" borderStyle="solid"
        >
            <mx:Canvas label="View 1" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 1"/>
            </mx:Canvas>
            <mx:Canvas label="View 2" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 2"/>
            </mx:Canvas>
            <mx:Canvas label="View 3" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 3"/>
            </mx:Canvas>
        </mx:ViewStack>
        
        <!-- Labels for the various controls -->
        <mx:Label x="10" y="252" text="ButtonBar"/>
        <mx:Label x="10" y="10" text="Accordion"/>
        <mx:Label x="262.5" y="10" text="TabNavigator"/>
        <mx:Label x="262.5" y="252" text="ViewStack"/>
        <mx:Label x="10" y="308" text="ToggleButtonBar"/>
        <mx:Label x="10" y="364" text="LinkBar"/>
        <mx:Label x="10" y="424" text="TabBar"/>

        <!--
            All these navigators use the same dataProvider,
            namely, the myViewStack ViewStack instance.
            Changing the selected view in one will affect
            all the others also.  
        -->        
        <mx:ButtonBar x="10" y="278" dataProvider="{myViewStack}" />
        <mx:ToggleButtonBar x="10" y="334" dataProvider="{myViewStack}" />
        <mx:LinkBar x="10" y="390" dataProvider="{myViewStack}" />
        <mx:TabBar x="10" y="444" dataProvider="{myViewStack}" />

    </mx:Panel>
    
</mx:Application>