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

<!--如何给ButtonBar添加一个ViewStack-->

<!--<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:ButtonBar id="buttonBar" dataProvider="{viewStack}" buttonHeight="32"/>

    <mx:ViewStack id="viewStack">

        <mx:VBox label="Button" icon="@Embed('assets/Button.png')" backgroundColor="white" width="480" height="60">

            <mx:Label text="Button..."/>

        </mx:VBox>

        <mx:VBox label="ButtonBar" icon="@Embed('assets/ButtonBar.png')" backgroundColor="white" width="480" height="60">

            <mx:Label text="ButtonBar..."/>

        </mx:VBox>

        <mx:VBox label="CheckBox" icon="@Embed('assets/CheckBox.png')" backgroundColor="white" width="480" height="60">

            <mx:Label text="CheckBox..."/>

        </mx:VBox>

        <mx:VBox label="ColorPicker" icon="@Embed('assets/ColorPicker.png')" backgroundColor="white" width="480" height="60">

            <mx:Label text="ColorPicker..."/>

        </mx:VBox>

    </mx:ViewStack>

</mx:Application>-->

<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" minWidth="955" minHeight="600">

    <fx:Declarations>

    </fx:Declarations>

    <s:VGroup>

        <s:ButtonBar dataProvider="{myViewStack}" requireSelection="true" />

        <mx:ViewStack id="myViewStack" borderStyle="solid">

            <s:NavigatorContent id="search" label="Search">

                <s:Label text="Search Screen"/>

            </s:NavigatorContent> 

            <s:NavigatorContent id="custInfo" label="Customer Info">

                <s:Label text="Customer Info"/>

            </s:NavigatorContent> 

            <s:NavigatorContent id="accountInfo" label="Account Info">

                <s:Label text="Account Info"/>

            </s:NavigatorContent>

        </mx:ViewStack>

        <s:ButtonBar id="buttonBar" dataProvider="{viewStack}" requireSelection="true"  />

        <mx:ViewStack id="viewStack">

            <mx:VBox label="Button" icon="@Embed('assets/Button.png')" backgroundColor="white" width="480" height="60">

                <mx:Label text="Button..."/>

            </mx:VBox>

            <mx:VBox label="ButtonBar" icon="@Embed('assets/ButtonBar.png')" backgroundColor="white" width="480" height="60">

                <mx:Label text="ButtonBar..."/>

            </mx:VBox>

            <mx:VBox label="CheckBox" icon="@Embed('assets/CheckBox.png')" backgroundColor="white" width="480" height="60">

                <mx:Label text="CheckBox..."/>

            </mx:VBox>

            <mx:VBox label="ColorPicker" icon="@Embed('assets/ColorPicker.png')" backgroundColor="white" width="480" height="60">

                <mx:Label text="ColorPicker..."/>

            </mx:VBox>

        </mx:ViewStack>

    </s:VGroup>

</s:Application>