一个导航容器可 以通过一组子容器来监控用户的操作。比如，TabNavigator?这个容器就可以通过一组tabs?来让用户选择可见的子容器。Flex3?提供了三种主要的导航容器：
????????ViewStack
????????TabNavigator
????????Accordion
接下来的时间逐 个介绍每个容器的使用方法。
1.???????????ViewStack?导航容器
? ViewStack?导航容器，以下简称VS?容器。是由很多子容器组合起来的，这些子容器相互叠在彼此之上，并且在某一特定的时间内只有一个容器是可见的或者说是Active?状态的。VS?容器没有定义?built-in?的机制来切换当前处于active?状态的容器，所以用户需要使用像LinkBar,TabBar?或者ToggleButtonBar?这些控件，或者使用ActionScript?来更改当前可见容器的状态。比你可以定义一系列的按钮来控制所有子容器的切换动作。
图中 左边的图片显示VS?容器中第一个子容器是激活的，可以用索引的方法来表示VS?容器里面的子容器。比如0-?（n-1?）.
创建一个VS?容器
??使用<mx:ViewStack>?标记就可以定义一个VS?容器，当然还可以设定很多属性了：
????????selectedIndex?表示如果VS?容器里里面有多余一个的子容器，那么selectedIndex?的值所对应的那个子容器就是active?的可见的。其取值范围0?到n-1.n?代表子容器的个数。
????????selectedChild?当前激活的容器当定义了一个或者多个子容器，如果没有定义子容器，其值为null?。并且这个属性必须是现在AS?当中指定你要激活的那个容器的id.
????????numChildren?值VS?容器当中到底有多少个子容器。
举 例：我们试图增加一些特效。
- <!--?containers/navigators/VSLinkEffects.mxml?-->???
- ?<?mx:Application???xmlns:mx?=?"http://www.adobe.com/2006/mxml"?>???
- ???mx:WipeUp???id?=?"myWU"???duration?=?"300"?/>???
- ???mx:WipeDown???id?=?"myWD"???duration?=?"300"?mx:WipeRight???id?=?"myWR"???duration?=?"300"?/>???
- ???mx:VBox?>???
- ?????mx:LinkBar???dataProvider?=?"{myViewStack}"???
- ???????borderStyle?=?"solid"???
- ???????backgroundColor?=?"#EEEEFF"?/>???
- ???????mx:ViewStack???id?=?"myViewStack"???
- ????????????borderStyle?=?"solid"???
- ????????????width?=?"100%"???
- ????????????creationCompleteEffect?=?"{myWR}"?>???
- ??????mx:Canvas???id?=?"search"???
- ??????????label?=?"Search"???
- ??????????hideEffect?=?"{myWD}"???
- ??????????showEffect?=?"{myWU}"?>???
- ???????mx:Label???text?=?"Search?Screen"?/>???
- ?????</?mx:Canvas?mx:Canvas???id?=?"custInfo"???
- ?????????label?=?"Customer?Info"???
- ?????????hideEffect?=?"{myWD}"???
- ?????????showEffect?=?"{myWU}"?mx:Label???text?=?"Customer?Info"?mx:Canvas???id?=?"accountInfo"???
- ?????????label?=?"Account?Info"???
- ?????????hideEffect?=?"{myWD}"???
- ?????????showEffect?=?"{myWU}"?mx:Label???text?=?"Account?Info"?/>???
- ????>???
- ??mx:ViewStack?>???
- ?>???
- mx:Application?>???
- <!--?containers/navigators/VSLinkEffects.mxml?-->??
- ?<mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml">??
- ???mx:WipeUp?id="myWU"?duration="300"/>??
- ???mx:WipeDown?id="myWD"?duration="300"/>??
- ???mx:WipeRight?id="myWR"?duration="300"/>??
- ???mx:VBox>??
- ?????mx:LinkBar?dataProvider="{myViewStack}"??
- ???????borderStyle="solid"??
- ???????backgroundColor="#EEEEFF"/>??
- ???????mx:ViewStack?id="myViewStack"??
- ????????????borderStyle="solid"??
- ????????????width="100%"??
- ????????????creationCompleteEffect="{myWR}">??
- ??????mx:Canvas?id="search"??
- ??????????label="Search"??
- ??????????hideEffect="{myWD}"??
- ??????????showEffect="{myWU}">??
- ???????mx:Label?text="Search?Screen"/>??
- ?????</mx:Canvas>??
- ?????mx:Canvas?id="custInfo"??
- ?????????label="Customer?Info"??
- ?????????hideEffect="{myWD}"??
- ?????????showEffect="{myWU}"mx:Label?text="Customer?Info"mx:Canvas?id="accountInfo"??
- ?????????label="Account?Info"??
- ?????????hideEffect="{myWD}"??
- ?????????showEffect="{myWU}"mx:Label?text="Account?Info"/>??
- ????>??
- ??mx:ViewStack>??
- ?>??
- mx:Application>??
?
效果图：
2.???????????TabNavigator?导航容器
TabNavigator?容器用来创建和管理一组tabs?，这些tabs?可以帮用户导航选择需要的子容器板块。
创建TabNavigator?容器
你可以通过<mx:TabNavigator>?标记来定义个TabNavigator?容器。用户可以通过tab?选择对应的板块容器。当用户改变当前容器时，?TabNavigator?容器都会触发一个change?事件。
TabNavigator?容器会自动为每一个子容器创建一个tab,?并且通过label?属性设定tab?里面的值。当然你可以指定图片等。用户还可以设定enable disable?属性来决定那个容器可用与否。
举例：
?
- <??xml???version?=?"1.0"??>???
- <!--?containers/navigators/TNEffect.mxml?-->???
- ??>???
- ????mx:WipeLeft???id?=?"myWL"?mx:TabNavigator?mx:VBox???label?=?"Accounts"???
- ??????width?=?"300"???
- ???????height?=?"150"???
- ???????showEffect?=?"{myWL}"?>???
- ????<!--?Accounts?view?goes?here.?-->???
- ????mx:Text???text?=?"This?is?a?text?control."?/>???
- ??>???
- ??mx:VBox???label?=?"Stocks"???
- ??????width?=?"300"???
- ??????height?=?"150"???
- ??????showEffect?=?"{myWL}"?>???
- ???????<!--?Stocks?view?goes?here.?-->???
- ???????mx:VBox???label?=?"Futures"???
- ??????width?=?"300"???
- ??????height?=?"150"???
- ???????showEffect?=?"{myWL}"?>???
- ?????????<!--?Futures?view?goes?here.?-->???
- ?????/>???
- ?
- <?xml?version="1.0"?>??
- <!--?containers/navigators/TNEffect.mxml?-->??
- ??>??
- ????mx:WipeLeft?id="myWL"mx:TabNavigatormx:VBox?label="Accounts"??
- ??????width="300"??
- ???????height="150"??
- ???????showEffect="{myWL}">??
- ????<!--?Accounts?view?goes?here.?-->??
- ????mx:Text?text="This?is?a?text?control."/>??
- ??>??
- ??mx:VBox?label="Stocks"??
- ??????width="300"??
- ??????height="150"??
- ??????showEffect="{myWL}">??
- ???????<!--?Stocks?view?goes?here.?-->??
- ???????/>??
- ??>??
- ??mx:VBox?label="Futures"??
- ??????width="300"??
- ??????height="150"??
- ???????showEffect="{myWL}">??
- ?????????<!--?Futures?view?goes?here.?-->??
- ?????/>??
- ?>??
?
效果如图：
TabNavigator?支持键盘导航功能，即可以通过键盘来选择tabs.?具体可以参考development guide.
?
3.???????????Accordion?导航容器
窗体 是很常见的容器了，可是有时候组件很多一个窗体放不下，accordion?就提供了一个可以来回移动的窗体。这个容器可以包含一系列的子panels?。但是任意时刻都只有一个panel?是可见的。
创建Accordion?容器
你可 以使用<mx:Accordion>?标记来创建这个容器。举例说明：
?
?
?
<!--?containers/navigators/AccordionButtonNav.mxml?-->???
- mx:Application???xmlns:mx?=?"http://www.adobe.com/2006/mxml"???width?=?"600"???
- ????height?=?"600"???
- ????creationComplete?=?"setButtonStyles();"?>???
- mx:Script?>???
- ????<![CDATA[??
- ?????public?function?setButtonStyles():void?{??
- ??????comp.getHeaderAt(0).setStyle('color',?0xAA0000);??
- ??????comp.getHeaderAt(1).setStyle('color',?0x00AA00);??
- ??}??
- ??????]]>???
- >???
- mx:Accordion???id?=?"comp"???height?=?"250"?>???
- ?????mx:Form???id?=?"shippingAddress"???label?=?"1.?Shipping?Address"?>???
- ????????mx:FormItem???id?=?"sfirstNameItem"???label?=?"First?Name"?mx:TextInput???id?=?"sfirstName"?/>???
- ????????mx:FormItem?>???
- ?????mx:Form?>???
- ???????mx:Form???id?=?"billingAddress"???label?=?"2.?Billing?Address"?mx:Button???id?=?"backButton"???label?=?"Back"???click?=?"comp.selectedIndex=0;"mx:Button???id?=?"nextButton"???label?=?"Next"???click?=?"comp.selectedIndex=2;"mx:Form???id?=?"creditCardInfo"???label?=?"3.?Credit?Card?Information"?>???
- ?????mx:Accordion?<!--?containers/navigators/AccordionButtonNav.mxml?-->??
- mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml"?width="600"??
- ????height="600"??
- ????creationComplete="setButtonStyles();">??
- mx:Script>??
- ????<![CDATA[?
- ?????public?function?setButtonStyles():void?{?
- ??}?
- ??????]]>??
- >??
- mx:Accordion?id="comp"?height="250">??
- ?????mx:Form?id="shippingAddress"?label="1.?Shipping?Address">??
- ????????mx:FormItem?id="sfirstNameItem"?label="First?Name">??
- ????????mx:TextInput?id="sfirstName"/>??
- ????????mx:FormItem>??
- ?????mx:Form>??
- ???????mx:Form?id="billingAddress"?label="2.?Billing?Address">??
- ???????mx:Button?id="backButton"?label="Back"?click="comp.selectedIndex=0;"mx:Button?id="nextButton"?label="Next"?click="comp.selectedIndex=2;"mx:Form?id="creditCardInfo"?label="3.?Credit?Card?Information">??
- ?????>??
- ?mx:Accordion>??
- >??
?我们增加了一些效果。比如用户通过按钮可以选择那个panel?是可见的。
mx:Button???id?=?"lastButton"???label?=?"Last"???click?="accordion1.selectedIndex?=?accordion1.numChildren?-?1;"?/>???
[xml]?mx:Button?id="lastButton"?label="Last"?click="accordion1.selectedIndex?=?accordion1.numChildren?-?1;"/>??
?
这段程序就可以 打开最后一个?panel.
同时还可以设定 每个?panels?的外观，包括字体、颜色等。
效果图：
当然?Accordion?也有键盘导航功能。具体参考?development guide.
4、?导航容器ApplicationControlBar
主要用来作页面顶部的导航条：
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
