导航器组件

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
    <mx:TabNavigator x="70" y="91" width="200" height="200" >  
        <mx:Canvas label="Tab 1" width="100%" height="100%">  
            <mx:CheckBox x="10" y="31" label="选中我" fontSize="12"/>  
             
        </mx:Canvas>  
        <mx:Canvas label="Tab 2" width="100%" height="100%">  
            <mx:Label x="20" y="41" text="第二个面板" fontSize="12"/>  
        </mx:Canvas>  
    </mx:TabNavigator>  
       
</mx:Application> 

 1 Accordion 组件

 

 

Accordion 是一个可折叠的导航器，包含一个子面板列表，但一次仅显示一个面板。

selectedChild 和 selectedIndex  表示当前显示的子元素和显示元素的索引号，可以利用这两个属性来控制组件的显示内容。如代码中的tab_menu.selectedIndex = 1 表示却换到第2个面板。

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
  
    <mx:Script>  
        <![CDATA[  
            internal function doSkip():void{  
                tab_menu.selectedIndex = 1;  
            }  
        ]]>  
    </mx:Script>  
  
    <mx:Accordion id="tab_menu" x="57" y="67" width="194" height="270" fontSize="12">  
        <mx:Canvas label="Item 1" width="100%" height="100%">  
            <mx:Label text="Canvas1" />  
            <mx:ColorPicker x="10" y="38"/>  
        </mx:Canvas>         
  
        <mx:VBox label="Item 2" width="100%" height="100%">  
            <mx:Text text="这里插入内容" height="28"/>  
            <mx:ComboBox>  
                <mx:Array>  
                    <mx:Object label="请选择性别"/>                       
                    <mx:Object label="女"/>  
                    <mx:Object label="男"/>  
                </mx:Array>  
            </mx:ComboBox>  
        </mx:VBox>  
  
        <mx:Panel title="内嵌的Panel" label="Item 3" width="90%" height="90%">  
        </mx:Panel>  
    </mx:Accordion>      
  
    <mx:Button x="259" y="315" label="跳到第二个菜单" fontSize="14" labelPlacement="right" click="doSkip()"/>  
</mx:Application>

 

2 ViewStack 组件

由若干重叠在一起的子容器组成，每次只有一个容器是可见或活动的。但它不为用户提供却换当前活动容器的界面接口，可以通过AS进行控制，或者和其他控制类容器联合使用。如：LinkBar、TabBar、ButtonBar、ToggleButtonBar等。

一般用来做向导类的应用。就是有那种下一步下一步的。

selectedChild 表示当前处于激活状态的子级对象

 

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
    <mx:Script>  
        <![CDATA[  
            internal function doChange():void{  
                if(viewstack_1.selectedChild == child2){  
                    viewstack_1.selectedChild = child1;  
                }else{  
                    viewstack_1.selectedChild = child2;  
                }  
            }  
        ]]>  
    </mx:Script>  
    <mx:ViewStack x="46" y="72" id="viewstack_1" width="200" height="200">  
        <mx:Canvas id="child1" label="View 1" width="100%" height="100%">  
            <mx:List fontSize="12">  
                <mx:Array>  
                    <mx:Object label="请选择您感兴趣的技术："/>                     
                    <mx:Object label="Flash"/>  
                    <mx:Object label="Flex"/>  
                    <mx:Object label="Flash Media server"/>  
                    <mx:Object label="Breeze"/>  
                </mx:Array>  
            </mx:List>  
        </mx:Canvas>  
        <mx:Canvas id="child2" label="View 2" width="100%" height="100%">  
            <mx:TextInput text="请输入您的邮箱地址"  fontSize="12"/>  
        </mx:Canvas>  
    </mx:ViewStack>  
    <mx:Button x="46" y="304" label="切换按钮" fontSize=" 12" click="doChange()"/>  
</mx:Application>  

 

3 使用 TabNavigator 进行快速导航

继承自ViewStack，还提供了用户却换内容的界面接口。

类似标签页却换面板。