<?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,还提供了用户却换内容的界面接口。
类似标签页却换面板。