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没多长时间，写这个也算重新回顾一些这块儿知识，要学习的东西还有很多，大神之路路漫漫~