flex使用buttonbar为viewstack添加导航功能

先建立一个Main.mxml的应用程序，作为一个主程序，再建立两个component ，一个是jiaju.mxml ,另一个是dianqi.mxml.

Main.mxml: 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:ns1="*"
               minWidth="955" minHeight="600" backgroundAlpha="0.7" backgroundColor="gray"
               xmlns:esri=http://www.esri.com/2008/ags>
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.IndexChangedEvent;

            protected function selectchange(event:IndexChangedEvent):void{
                Alert.show("转为："+event.newIndex.toString());
            }
        ]]>
    </fx:Script>
    <s:layout>
        <s:VerticalLayout paddingLeft="200" paddingTop="100"/>
    </s:layout>
    <s:ButtonBar dataProvider="{viewstack}" />
    <mx:ViewStack id="viewstack" width="50%" height="50%" change="selectchange(event)">
          <ns1:dianqi label="家用电器"/>
        <ns1:jiaju label="家具"/>
    </mx:ViewStack>
</s:Application>

jiaju.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
       <s:Panel title="家具" width="100%" height="100%">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <s:HGroup width="100%" enabled="false">
            <s:TextInput width="100%"/>
            <s:Button label="搜索家具"/>
        </s:HGroup>
        <s:Line width="100%"/>
        <s:Label text="没有找到符合要求的家具"/>
    </s:Panel>
</s:NavigatorContent>

jiadian.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <s:Panel title="电器" width="100%" height="100%">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <s:HGroup width="100%" enabled="false">
            <s:TextInput width="100%"/>
            <s:Button label="搜索电器"/>
        </s:HGroup>
        <s:Line width="100%"/>
        <s:Label text="没有找到符合要求的电器"/>
    </s:Panel>
</s:NavigatorContent>

新手学习flex没多长时间，写这个也算重新回顾一些这块儿知识，要学习的东西还有很多，大神之路路漫漫~