Flex 导航学习笔记

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

ViewStack的使用

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:ViewStack id="boxstack">

<mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>

<mx:VBox id="green" label="greenbox" width="150" height="150" backgroundColor="#00FF00"/>

<mx:VBox id="blue" label="bluebox" width="150" height="150" backgroundColor="#0000FF"/>

</mx:ViewStack>

<mx:HBox >

<mx:Button label="redbox" click="boxstack.selectedIndex=0"/>

<mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>

<mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>

</mx:HBox>

</mx:Application>

LinkBar 的使用

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:ViewStack id="boxstack">

<mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>

<mx:VBox id="green" label="greenbox" width="150" height="150" backgroundColor="#00FF00"/>

<mx:VBox id="blue" label="bluebox" width="150" height="150" backgroundColor="#0000FF"/>

</mx:ViewStack>

<!--<mx:HBox >

<mx:Button label="redbox" click="boxstack.selectedIndex=0"/>

<mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>

<mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>

</mx:HBox>-->

<mx:LinkBar dataProvider="{boxstack}"/>

</mx:Application>

TabBar的使用

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:TabBar dataProvider="{boxstack}"/>

<mx:ViewStack id="boxstack">

<mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>

<mx:VBox id="green" label="greenbox" width="150" height="150" backgroundColor="#00FF00"/>

<mx:VBox id="blue" label="bluebox" width="150" height="150" backgroundColor="#0000FF"/>

</mx:ViewStack>

<!--<mx:HBox >

<mx:Button label="redbox" click="boxstack.selectedIndex=0"/>

<mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>

<mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>

</mx:HBox>-->

</mx:Application>

ButtonBar的使用

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:ButtonBar dataProvider="{boxstack}"/>

<mx:ViewStack id="boxstack">

<mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>

<mx:VBox id="green" label="greenbox" width="150" height="150" backgroundColor="#00FF00"/>

<mx:VBox id="blue" label="bluebox" width="150" height="150" backgroundColor="#0000FF"/>

</mx:ViewStack>

<!--<mx:HBox >

<mx:Button label="redbox" click="boxstack.selectedIndex=0"/>

<mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>

<mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>

</mx:HBox>-->

</mx:Application>

ToggleButtonBar的使用

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:ToggleButtonBar dataProvider="{boxstack}"/>

<mx:ViewStack id="boxstack">

<mx:VBox id="red" label="redbox" width="150" height="150" backgroundColor ="#FF0000"/>

<mx:VBox id="green" label="greenbox" width="150" height="150" backgroundColor="#00FF00"/>

<mx:VBox id="blue" label="bluebox" width="150" height="150" backgroundColor="#0000FF"/>

</mx:ViewStack>

<!--<mx:HBox >

<mx:Button label="redbox" click="boxstack.selectedIndex=0"/>

<mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>

<mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>

</mx:HBox>-->

</mx:Application>

TabNavigator 的使用

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:TabNavigator width="300" >

<mx:VBox id="red" label="redbox" width="100%" height="150" backgroundColor ="#FF0000"/>

<mx:VBox id="green" label="greenbox" width="100%" height="150" backgroundColor="#00FF00"/>

<mx:VBox id="blue" label="bluebox" width="100%" height="150" backgroundColor="#0000FF"/>

</mx:TabNavigator>

<!--<mx:HBox >

<mx:Button label="redbox" click="boxstack.selectedIndex=0"/>

<mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>

<mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>

</mx:HBox>-->

</mx:Application>

Accordion 的使用

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Accordion width="300" >

<mx:VBox id="red" label="redbox" width="100%" height="150" backgroundColor ="#FF0000"/>

<mx:VBox id="green" label="greenbox" width="100%" height="150" backgroundColor="#00FF00"/>

<mx:VBox id="blue" label="bluebox" width="100%" height="150" backgroundColor="#0000FF"/>

</mx:Accordion>

<!--<mx:HBox >

<mx:Button label="redbox" click="boxstack.selectedIndex=0"/>

<mx:Button label="greenbox" click="boxstack.selectedIndex=1"/>

<mx:Button label="bluebox" click="boxstack.selectedIndex=2"/>

</mx:HBox>-->

</mx:Application>