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.     <mx:VBox id="red" label="redbox" width="100%" height="150" backgroundColor ="#FF0000"/>
  80.     <mx:VBox id="green" label="greenbox"  width="100%" height="150" backgroundColor="#00FF00"/> 
  81.     <mx:VBox id="blue" label="bluebox"  width="100%" height="150" backgroundColor="#0000FF"/>
  82.     </mx:TabNavigator>



  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. </mx:Application>




  89. Accordion  的使用
  90. <?xml version="1.0" encoding="utf-8"?>
  91. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">


  92.     <mx:Accordion   width="300" >

  93.     <mx:VBox id="red" label="redbox" width="100%" height="150" backgroundColor ="#FF0000"/>
  94.     <mx:VBox id="green" label="greenbox"  width="100%" height="150" backgroundColor="#00FF00"/> 
  95.     <mx:VBox id="blue" label="bluebox"  width="100%" height="150" backgroundColor="#0000FF"/>
  96.     </mx:Accordion>



  97.   <!--<mx:HBox >
  98.   <mx:Button label="redbox" click="boxstack.selectedIndex=0"/>
  99.    <mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>
  100.    <mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>
  101.   </mx:HBox>-->

  102. </mx:Application>