v4_06 Understanding navigator containers 了解导航容器
ex4_06
这部分主要是讲
如何使用导航器(navigator)容器,包括ViewStack容器,它与其它UI控件共同工作来导航内容
有两种类型的容器
布局容器:用来控制容器子内容的大小和位置,这些子内容可能是控件或其它容器
导航容器:控制在子容器中进行导航,这些内容只可能是容器,而不是控件
注意例子中使用的component,都是使用<!--WizRtf2Html Charset=0 -->NavigatorContent 写的
Accordion容器在垂直方向定义了堆叠的褶(pleats),当他们打开或关闭时会有动画效果
每个褶(pleat)显示一个子布局容器的内容,并且同一时间只有一个褶(pleat)可以被打开
<!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <mx:Accordion resizeToContent="true"> <components:HumanResources label="Human Resources"/> <components:Marketing label="Marketing" /> <components:InformationTechnology label="Information Technology" /> </mx:Accordion>
![](/upload/picture/pic/82295/21ae8645-e97b-37f1-9d97-95b24cb8753f.gif)
TabNavigator的效果
<!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <mx:TabNavigator resizeToContent="true"> <components:HumanResources label="Human Resources"/> <components:Marketing label="Marketing" /> <components:InformationTechnology label="Information Technology" /> </mx:TabNavigator>
![](/upload/picture/pic/82293/62913d36-11ef-3828-857c-4e3b7d3769f6.gif)
ViewStack导航器容器实际上没有一个允许用户切换子容器的用户界面元素
通常它实现一个UI控件,像MX LinkBar 或TabBar控件,Spark TabBar 或ButtonBar控件,来导航子容器
既然ViewStack控件为导航显示使用UI控件,必须将ViewStack容器的id属性绑定到UI控件的dataProvider属性上
如果不使用TabBar,它只能显示第一页 (TabBar也可以使用其它Bar)
<!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <s:TabBar dataProvider="{testid}"/> <!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <mx:ViewStack id="testid" resizeToContent="true"> <components:HumanResources label="Human Resources"/> <components:Marketing label="Marketing" /> <components:InformationTechnology label="Information Technology" /> </mx:ViewStack>
![](/upload/picture/pic/82291/a986afb3-9834-3cf3-a9f9-0b4cfac42091.gif)