Flex 导航学习笔记

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

  1. ViewStack的使用
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
  4.     <mx:ViewStack id="boxstack">
  5.     <mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>
  6.     <mx:VBox id="green" label="greenbox"  width="150" height="150" backgroundColor="#00FF00"/>  
  7.     <mx:VBox id="blue" label="bluebox"  width="150" height="150" backgroundColor="#0000FF"/>
  8.     </mx:ViewStack>
  9.   <mx:HBox >
  10.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
  11.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
  12.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
  13.   </mx:HBox>
  14. </mx:Application>
  15. LinkBar 的使用
  16. <?xml version="1.0" encoding="utf-8"?>
  17. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
  18.     <mx:ViewStack id="boxstack">
  19.     <mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>
  20.     <mx:VBox id="green" label="greenbox"  width="150" height="150" backgroundColor="#00FF00"/>  
  21.     <mx:VBox id="blue" label="bluebox"  width="150" height="150" backgroundColor="#0000FF"/>
  22.     </mx:ViewStack>
  23.   <!--<mx:HBox >
  24.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
  25.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
  26.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
  27.   </mx:HBox>-->
  28. <mx:LinkBar dataProvider="{boxstack}"/>
  29. </mx:Application>
  30. TabBar的使用
  31. <?xml version="1.0" encoding="utf-8"?>
  32. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
  33. <mx:TabBar dataProvider="{boxstack}"/>
  34.     <mx:ViewStack id="boxstack">
  35.     <mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>
  36.     <mx:VBox id="green" label="greenbox"  width="150" height="150" backgroundColor="#00FF00"/>  
  37.     <mx:VBox id="blue" label="bluebox"  width="150" height="150" backgroundColor="#0000FF"/>
  38.     </mx:ViewStack>
  39.   <!--<mx:HBox >
  40.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
  41.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
  42.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
  43.   </mx:HBox>-->
  44. </mx:Application>
  45. ButtonBar的使用
  46. <?xml version="1.0" encoding="utf-8"?>
  47. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
  48. <mx:ButtonBar dataProvider="{boxstack}"/>
  49.     <mx:ViewStack id="boxstack">
  50.     <mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>
  51.     <mx:VBox id="green" label="greenbox"  width="150" height="150" backgroundColor="#00FF00"/>  
  52.     <mx:VBox id="blue" label="bluebox"  width="150" height="150" backgroundColor="#0000FF"/>
  53.     </mx:ViewStack>
  54.   <!--<mx:HBox >
  55.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
  56.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
  57.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
  58.   </mx:HBox>-->
  59. </mx:Application>
  60. ToggleButtonBar的使用
  61. <?xml version="1.0" encoding="utf-8"?>
  62. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
  63. <mx:ToggleButtonBar dataProvider="{boxstack}"/>
  64.     <mx:ViewStack id="boxstack">
  65.     <mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>
  66.     <mx:VBox id="green" label="greenbox"  width="150" height="150" backgroundColor="#00FF00"/>  
  67.     <mx:VBox id="blue" label="bluebox"  width="150" height="150" backgroundColor="#0000FF"/>
  68.     </mx:ViewStack>
  69.   <!--<mx:HBox >
  70.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
  71.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
  72.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
  73.   </mx:HBox>-->
  74. </mx:Application>
  75. TabNavigator 的使用
  76. <?xml version="1.0" encoding="utf-8"?>
  77. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
  78.     <mx:TabNavigator   width="300" >
  79.     
  80.     <mx:VBox id="red" label="redbox" width="100%" height="150" backgroundColor ="#FF0000"/>
  81.     <mx:VBox id="green" label="greenbox"  width="100%" height="150" backgroundColor="#00FF00"/> 
  82.     <mx:VBox id="blue" label="bluebox"  width="100%" height="150" backgroundColor="#0000FF"/>
  83.     </mx:TabNavigator>
  84.   <!--<mx:HBox >
  85.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
  86.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
  87.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
  88.   </mx:HBox>-->
  89. </mx:Application>
  90. Accordion  的使用
  91. <?xml version="1.0" encoding="utf-8"?>
  92. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
  93.     <mx:Accordion   width="300" >
  94.     
  95.     <mx:VBox id="red" label="redbox" width="100%" height="150" backgroundColor ="#FF0000"/>
  96.     <mx:VBox id="green" label="greenbox"  width="100%" height="150" backgroundColor="#00FF00"/> 
  97.     <mx:VBox id="blue" label="bluebox"  width="100%" height="150" backgroundColor="#0000FF"/>
  98.     </mx:Accordion>
  99.   <!--<mx:HBox >
  100.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
  101.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
  102.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
  103.   </mx:HBox>-->
  104. </mx:Application>

你可能感兴趣的:(Flex 导航学习笔记)