Flex 导航控件学习笔记

Flex 导航学习笔记

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

1. 1. 
      
2. 
   
3. ViewStack的使用
4. <?xml version="1.0" encoding="utf-8"?>
5. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
6.     <mx:ViewStack id="boxstack">
7.     <mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>
8.     <mx:VBox id="green" label="greenbox"  width="150" height="150" backgroundColor="#00FF00"/>  
9.     <mx:VBox id="blue" label="bluebox"  width="150" height="150" backgroundColor="#0000FF"/>
10.     </mx:ViewStack>
11. 
    
12.   <mx:HBox >
13.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
14.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
15.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
16.   </mx:HBox>
17. </mx:Application>
18. 
    
19. 
    
20. 
    
21. 
    
22. 
    
23. LinkBar 的使用
24. 
    
25. 
    
26. <?xml version="1.0" encoding="utf-8"?>
27. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
28.     <mx:ViewStack id="boxstack">
29.     <mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>
30.     <mx:VBox id="green" label="greenbox"  width="150" height="150" backgroundColor="#00FF00"/>  
31.     <mx:VBox id="blue" label="bluebox"  width="150" height="150" backgroundColor="#0000FF"/>
32.     </mx:ViewStack>
33. 
    
34.   <!--<mx:HBox >
35.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
36.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
37.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
38.   </mx:HBox>-->
39. 
    
40. <mx:LinkBar dataProvider="{boxstack}"/>
41. </mx:Application>
42. 
    
43. 
    
44. 
    
45. 
    
46. 
    
47. 
    
48. TabBar的使用
49. 
    
50. <?xml version="1.0" encoding="utf-8"?>
51. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
52. 
    
53. 
    
54. <mx:TabBar dataProvider="{boxstack}"/>
55.     <mx:ViewStack id="boxstack">
56.     <mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>
57.     <mx:VBox id="green" label="greenbox"  width="150" height="150" backgroundColor="#00FF00"/>  
58.     <mx:VBox id="blue" label="bluebox"  width="150" height="150" backgroundColor="#0000FF"/>
59.     </mx:ViewStack>
60. 
    
61.   <!--<mx:HBox >
62.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
63.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
64.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
65.   </mx:HBox>-->
66. 
    
67. </mx:Application>
68. 
    
69. 
    
70. ButtonBar的使用
71. 
    
72. <?xml version="1.0" encoding="utf-8"?>
73. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
74. 
    
75. 
    
76. <mx:ButtonBar dataProvider="{boxstack}"/>
77.     <mx:ViewStack id="boxstack">
78.     <mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>
79.     <mx:VBox id="green" label="greenbox"  width="150" height="150" backgroundColor="#00FF00"/>  
80.     <mx:VBox id="blue" label="bluebox"  width="150" height="150" backgroundColor="#0000FF"/>
81.     </mx:ViewStack>
82. 
    
83.   <!--<mx:HBox >
84.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
85.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
86.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
87.   </mx:HBox>-->
88. 
    
89. </mx:Application>
90. 
    
91. 
    
92. 
    
93. 
    
94. 
    
95. ToggleButtonBar的使用
96. 
    
97. <?xml version="1.0" encoding="utf-8"?>
98. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
99. 
    
100. 
     
101. <mx:ToggleButtonBar dataProvider="{boxstack}"/>
102.     <mx:ViewStack id="boxstack">
103.     <mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>
104.     <mx:VBox id="green" label="greenbox"  width="150" height="150" backgroundColor="#00FF00"/>  
105.     <mx:VBox id="blue" label="bluebox"  width="150" height="150" backgroundColor="#0000FF"/>
106.     </mx:ViewStack>
107. 
     
108.   <!--<mx:HBox >
109.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
110.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
111.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
112.   </mx:HBox>-->
113. 
     
114. </mx:Application>
115. 
     
116. 
     
117. TabNavigator 的使用
118. <?xml version="1.0" encoding="utf-8"?>
119. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
120. 
     
121. 
     
122.     <mx:TabNavigator   width="300" >
123. 
     
124.     <mx:VBox id="red" label="redbox" width="100%" height="150" backgroundColor ="#FF0000"/>
125.     <mx:VBox id="green" label="greenbox"  width="100%" height="150" backgroundColor="#00FF00"/> 
126.     <mx:VBox id="blue" label="bluebox"  width="100%" height="150" backgroundColor="#0000FF"/>
127.     </mx:TabNavigator>
128. 
     
129. 
     
130. 
     
131.   <!--<mx:HBox >
132.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
133.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
134.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
135.   </mx:HBox>-->
136. 
     
137. </mx:Application>
138. 
     
139. 
     
140. 
     
141. 
     
142. Accordion  的使用
143. <?xml version="1.0" encoding="utf-8"?>
144. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
145. 
     
146. 
     
147.     <mx:Accordion   width="300" >
148. 
     
149.     <mx:VBox id="red" label="redbox" width="100%" height="150" backgroundColor ="#FF0000"/>
150.     <mx:VBox id="green" label="greenbox"  width="100%" height="150" backgroundColor="#00FF00"/> 
151.     <mx:VBox id="blue" label="bluebox"  width="100%" height="150" backgroundColor="#0000FF"/>
152.     </mx:Accordion>
153. 
     
154. 
     
155. 
     
156.   <!--<mx:HBox >
157.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
158.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
159.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
160.   </mx:HBox>-->
161. 
     
162. </mx:Application>
     1.