Accordion 、ViewStack、TabNavigator 导航组件

1） Accordion

 

这个是一个可以收缩的导航控件，就像常用的QQ、MSN聊天工具的折叠面板。

这个我们可以了解一下Accordion的selectedIndex和selectedChild两个属性。

selectedIndex：元素的索引号

selectedChid：元素的ID

 

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel title="Accordion Container Example" height="90%" width="455" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"> <mx:Accordion id="accordion" width="445" height="366"> <mx:VBox label="登录统计"> <mx:Label text="up up day"/> </mx:VBox> <mx:VBox label="个人信息" width="100%" height="100%"> text="sunny&#xa;21&#xa;女"/> </mx:VBox> <mx:VBox label="浏览记录"> <mx:Label text="day day up!"/> </mx:VBox> </mx:Accordion> <mx:HBox width="389" height="29"> <mx:Button label="Select Panel 1" click="accordion.selectedIndex=0;"/> <mx:Button label="Select Panel 2" click="accordion.selectedIndex=1;"/> <mx:Button label="Select Panel 3" click="accordion.selectedIndex=2;"/> </mx:HBox> </mx:Panel> </mx:Application>

 

效果如图所示

 

 

 2） ViewStack

  ViewStack支持通过折叠方式对子组件进行导航，同一时刻只有一个组件处于激活状态。通过和IO控制组件协助实现导航切换，如Button、tabbar等类组件。

通过一些属性对子组件进行状态设定，主要包括如下： 

      selectedIndex:设定激活子组件的数组下标，即所有组件看成一个数组，从0开始。

      selectedChild：当前选中的子组件对象。

      numChildren:定义组件Viewstack组件中的个数。

 

 

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel x="149" y="25" width="434" height="395" layout="absolute" title="viewstack example"> <mx:HBox x="20.5" y="10" width="373" height="31"> <mx:Button label="search panel" id="one" click="viewstack.selectedChild=s1"/> <mx:Button label="search panel2" id="two" click="viewstack.selectedChild=s2"/> <mx:Button label="search panel" id="third" click="viewstack.selectedChild=s3"/> </mx:HBox> <mx:ViewStack x="20.5" y="49" id="viewstack" width="330.5" height="283"> <mx:Panel id="s1" label="面板2" width="100%" height="100%" backgroundColor="#DF86DA"> </mx:Panel> <mx:Panel id="s2" label="我的面板" width="100%" height="100%" backgroundColor="#F64E38"> </mx:Panel> <mx:Panel id="s3" label="面板3" width="100%" height="100%" backgroundColor="#D2AFEE"> </mx:Panel> <mx:Panel id="s4" label="面板4" width="100%" height="100%" backgroundColor="#EDE971"> </mx:Panel> </mx:ViewStack> </mx:Panel> </mx:Application>

 

效果如图所示：

 

 

 

 

 

3)TabNavigator  及选项卡布局组件

   

可以创建管理一组选项卡，在选项卡中可以放置任何可视化组件。继承自ViewStack组件，同样支持ViewStack的大部分属性与操作。

比ViewStack更为方便，因为不需要编写导航控制逻辑。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel width="388" height="330" x="60" y="19" title="tabnavagator example" borderColor="#16097B"> <mx:TabNavigator x="233" y="67" width="266" height="263" borderColor="#16E3E5"> <mx:Canvas label="提示" width="100%" height="100%" backgroundColor="#F3E2E2"> <mx:TextInput x="10" y="10" text="信息绝对真实" fontSize="12" themeColor="#87C3E9" borderColor="#A4CBE6"/> </mx:Canvas> <mx:VBox label="个人信息" width="100%" height="100%" backgroundColor="#94DBF2"> <mx:Label text="用户名：sunny" fontSize="12"/> <mx:Label text="性别：女" fontSize="12"/> <mx:Label text="年龄：21" fontSize="12"/> </mx:VBox> <mx:VBox label="学习统计" width="100%" height="100%" backgroundColor="#6A71C8"> <mx:Label text="语法：基本掌握" fontSize="12"/> <mx:Label text="组件：正在研究中。。。" fontSize="12"/> <mx:Label text="时间：14个小时/天" fontSize="12"/> </mx:VBox> <mx:VBox label="学习课程" width="100%" height="100%" backgroundColor="#EEB2E2"> <mx:TextArea width="207" height="112" fontSize="12" backgroundColor="#DF93E8" text="课程：Flex flash css html"/> </mx:VBox> </mx:TabNavigator> </mx:Panel> </mx:Application>

 

  效果如图所示：

 

                                            点击组件的标签时，组件会自动进行显示区域切换