Actionscript 3 Flex4-使用ButtonBar从一个.mxml文件导航到另一个

我正在用AdobeFlashBuilder4.7在Flex3中创建一个窗口应用程序

我有两个.mxml文件（Main.mxml和Home.mxml）

在Main.mxml中，我有ButtonBar，当用户单击Home ButtonBar时，我希望用户被重定向到Home.mxml

我已经在谷歌上搜索了一段时间，但没有明确的答案

我已经研究了ViewStack和TabNavigator以及状态，我不确定这是否是我要寻找的

这是我的Main.mxml文件

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       applicationComplete="init()"
                       showStatusBar="false">

    <fx:Declarations></fx:Declarations> 

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        s|ButtonBar s|ButtonBarButton:upAndSelected,
        s|ButtonBar s|ButtonBarButton:overAndSelected,
        s|ButtonBar s|ButtonBarButton:downAndSelected,
        s|ButtonBar s|ButtonBarButton:disabledAndSelected {
            chromeColor: #666666;
            color: #FFFFFF;
            fontSize: 32;
        }
        s|ButtonBar { 
            chromeColor: #000000;
            color: #FFFFFF;
            fontSize: 32;
            bottom: 0;
            typographicCase: uppercase;
        }
    </fx:Style>

    <s:ButtonBar width="100%" height="13%">  
        <mx:ArrayCollection>
            <fx:String>Home</fx:String>
        </mx:ArrayCollection>
    </s:ButtonBar>

</s:WindowedApplication>

@命名空间s“library://ns.adobe.com/flex/spark";
s |按钮栏s |按钮栏按钮：向上并选中，
s| ButtonBar s|ButtonBarButton：过度选择，
s |按钮栏s |按钮栏按钮：向下和选中，
s |按钮栏s |按钮栏：禁用并选中{
色度：#666666；
颜色：#FFFFFF；
大小:32 ;；
}
s | ButtonBar{
色度：#000000；
颜色：#FFFFFF；
大小:32 ;；
底部：0；
印刷字体：大写；
}
家

这是我的Home.mxml文件

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Label text="Here"/>

</s:WindowedApplication>

---

请帮助

您可以通过多种方式解决此问题。我将在我比较有经验的一篇文章中详细阐述

首先，请看一下这里面的视频，这样你就可以知道我在说什么了

该应用程序使用由单个按钮组成的横向菜单，类似于按钮栏

在右边有一个TabNavigator，我已经在上面手动添加了一些MXML视图。每个视图都表示为自己的.mxml文件

以下是主文件的简化版本：

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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:views="views.*">

<s:VGroup left="0" top="0" bottom="0" width="100" horizontalAlign="center">
    <s:Image width="60" height="60" source="assets/someicon.png" click="goHome(event)"/>        
    <s:Image width="60" height="60" source="assets/someicon.png" click="goIcons(event)"/>
</s:VGroup>

<mx:TabNavigator id="myTabNavigator" left="100" right="0" top="0" bottom="0" borderStyle="none" paddingTop="0" tabHeight="0" tabWidth="0" creationPolicy="auto" backgroundAlpha="0">
    <views:HomeView />
    <views:IconsView />
</mx:TabNavigator>

</s:WindowedApplication>

这两个函数需要在fx:Script块中

---

通过这种方式，您可以从按钮栏更改TabNavigator中当前显示的选项卡。

将其设置为带有两个选项卡的TabNavigator，这样您就不必处理按钮。

protected function goHome(event:MouseEvent):void
{
    myTabNavigator.selectedIndex = 0; //This value will change depending on the clicked button.
}

protected function goIcons(event:MouseEvent):void
{
    myTabNavigator.selectedIndex = 1; //This value will change depending on the clicked button.
}