Flex 导航控件学习笔记

Flex 导航学习笔记 收藏

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

1. 
   
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>
10. 
    
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>
17. 
    
18. 
    
19. 
    
20. 
    
21. 
    
22. LinkBar 的使用
23. 
    
24. 
    
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>
32. 
    
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>-->
38. 
    
39. <mx:LinkBar dataProvider="{boxstack}"/>
40. </mx:Application>
41. 
    
42. 
    
43. 
    
44. 
    
45. 
    
46. 
    
47. TabBar的使用
48. 
    
49. <?xml version="1.0" encoding="utf-8"?>
50. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
51. 
    
52. 
    
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>
59. 
    
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>-->
65. 
    
66. </mx:Application>
67. 
    
68. 
    
69. ButtonBar的使用
70. 
    
71. <?xml version="1.0" encoding="utf-8"?>
72. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
73. 
    
74. 
    
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>
81. 
    
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>-->
87. 
    
88. </mx:Application>
89. 
    
90. 
    
91. 
    
92. 
    
93. 
    
94. ToggleButtonBar的使用
95. 
    
96. <?xml version="1.0" encoding="utf-8"?>
97. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
98. 
    
99. 
    
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>
106. 
     
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>-->
112. 
     
113. </mx:Application>
114. 
     
115. 
     
116. TabNavigator 的使用
117. <?xml version="1.0" encoding="utf-8"?>
118. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
119. 
     
120. 
     
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>
127. 
     
128. 
     
129. 
     
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>-->
135. 
     
136. </mx:Application>
137. 
     
138. 
     
139. 
     
140. 
     
141. Accordion  的使用
142. <?xml version="1.0" encoding="utf-8"?>
143. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
144. 
     
145. 
     
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>
152. 
     
153. 
     
154. 
     
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>-->
160. 
     
161. </mx:Application>