Flex 导航学习笔记

一段时间没有学flex 来，今天把看到的笔记都记录下来。是一些导航的使用，可以尝试运行一下。感觉还不错

2. ViewStack的使用
3. <?xml version="1.0" encoding="utf-8"?>
4. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
5.     <mx:ViewStack id="boxstack">
6.     <mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>
7.     <mx:VBox id="green" label="greenbox"  width="150" height="150" backgroundColor="#00FF00"/>  
8.     <mx:VBox id="blue" label="bluebox"  width="150" height="150" backgroundColor="#0000FF"/>
9.     </mx:ViewStack>
11.   <mx:HBox >
12.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
13.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
14.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
15.   </mx:HBox>
16. </mx:Application>
22. LinkBar 的使用
25. <?xml version="1.0" encoding="utf-8"?>
26. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
27.     <mx:ViewStack id="boxstack">
28.     <mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>
29.     <mx:VBox id="green" label="greenbox"  width="150" height="150" backgroundColor="#00FF00"/>  
30.     <mx:VBox id="blue" label="bluebox"  width="150" height="150" backgroundColor="#0000FF"/>
31.     </mx:ViewStack>
33.   <!--<mx:HBox >
34.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
35.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
36.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
37.   </mx:HBox>-->
39. <mx:LinkBar dataProvider="{boxstack}"/>
40. </mx:Application>
47. TabBar的使用
49. <?xml version="1.0" encoding="utf-8"?>
50. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
53. <mx:TabBar dataProvider="{boxstack}"/>
54.     <mx:ViewStack id="boxstack">
55.     <mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>
56.     <mx:VBox id="green" label="greenbox"  width="150" height="150" backgroundColor="#00FF00"/>  
57.     <mx:VBox id="blue" label="bluebox"  width="150" height="150" backgroundColor="#0000FF"/>
58.     </mx:ViewStack>
60.   <!--<mx:HBox >
61.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
62.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
63.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
64.   </mx:HBox>-->
66. </mx:Application>
69. ButtonBar的使用
71. <?xml version="1.0" encoding="utf-8"?>
72. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
75. <mx:ButtonBar dataProvider="{boxstack}"/>
76.     <mx:ViewStack id="boxstack">
77.     <mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>
78.     <mx:VBox id="green" label="greenbox"  width="150" height="150" backgroundColor="#00FF00"/>  
79.     <mx:VBox id="blue" label="bluebox"  width="150" height="150" backgroundColor="#0000FF"/>
80.     </mx:ViewStack>
82.   <!--<mx:HBox >
83.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
84.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
85.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
86.   </mx:HBox>-->
88. </mx:Application>
94. ToggleButtonBar的使用
96. <?xml version="1.0" encoding="utf-8"?>
97. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
100. <mx:ToggleButtonBar dataProvider="{boxstack}"/>
101.     <mx:ViewStack id="boxstack">
102.     <mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>
103.     <mx:VBox id="green" label="greenbox"  width="150" height="150" backgroundColor="#00FF00"/>  
104.     <mx:VBox id="blue" label="bluebox"  width="150" height="150" backgroundColor="#0000FF"/>
105.     </mx:ViewStack>
107.   <!--<mx:HBox >
108.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
109.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
110.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
111.   </mx:HBox>-->
113. </mx:Application>
116. TabNavigator 的使用
117. <?xml version="1.0" encoding="utf-8"?>
118. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
121.     <mx:TabNavigator   width="300" >
122.     
123.     <mx:VBox id="red" label="redbox" width="100%" height="150" backgroundColor ="#FF0000"/>
124.     <mx:VBox id="green" label="greenbox"  width="100%" height="150" backgroundColor="#00FF00"/> 
125.     <mx:VBox id="blue" label="bluebox"  width="100%" height="150" backgroundColor="#0000FF"/>
126.     </mx:TabNavigator>
130.   <!--<mx:HBox >
131.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
132.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
133.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
134.   </mx:HBox>-->
136. </mx:Application>
141. Accordion  的使用
142. <?xml version="1.0" encoding="utf-8"?>
143. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
146.     <mx:Accordion   width="300" >
147.     
148.     <mx:VBox id="red" label="redbox" width="100%" height="150" backgroundColor ="#FF0000"/>
149.     <mx:VBox id="green" label="greenbox"  width="100%" height="150" backgroundColor="#00FF00"/> 
150.     <mx:VBox id="blue" label="bluebox"  width="100%" height="150" backgroundColor="#0000FF"/>
151.     </mx:Accordion>
155.   <!--<mx:HBox >
156.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
157.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
158.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
159.   </mx:HBox>-->
161. </mx:Application>