Apache flex 同一视图上的Flex mobile底部和顶部选项卡式视图

我想在同一个视图中添加底部和顶部选项卡栏-这是一个flex mobile视图。我尝试了这个方法，但是当我在一个视图上创建两个选项卡栏时，只会查看其中一个，即底部的选项卡栏。但如果我删除底部的一个，它将显示上部的选项卡栏。关于在同一屏幕上同时显示这两个选项有什么建议吗

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            title="">

    <s:TabbedViewNavigator id="tb_hastaUp" width="100%" height="100%" skinClass="skins.TabbedViewNavigatorSkin">
        <s:ViewNavigator label="view1" width="100%" height="100%" firstView="views.view1" />
        <s:ViewNavigator label="view2" width="100%" height="100%" firstView="views.view2" />
        <s:ViewNavigator label="view3" width="100%" height="100%" firstView="views.view3" />
    </s:TabbedViewNavigator>



    <s:TabbedViewNavigator id="tb_hastaBottom" width="100%" height="100%" skinClass="spark.skins.mobile.TabbedViewNavigatorSkin">
        <s:ViewNavigator label="view1" width="100%" height="100%" firstView="views.view1"/>
        <s:ViewNavigator label="view2" width="100%" height="100%" firstView="views.view2" />
        <s:ViewNavigator label="view3" width="100%" height="100%" firstView="views.view3" />

    </s:TabbedViewNavigator>

 </s:View>

我希望实现如下视图：

---

我认为，使用两个开箱即用的选项卡式ViewNavigator组件，您无法实现自己的目标。主要原因是每个人都想管理自己的视图堆栈

也许您可以使用mx:ViewStack组件实现，并使用两个ButtonBar组件驱动它

因此，您的视图如下所示：

<View>
  <ButtonBar />
  <ViewStack>
    <NavigatorContent>
      <MyView/>
    </NavigatorContent>
    ...
  </ViewStack>
  <ButtonBar />
</View>

...

现在，您可以使用按钮栏以编程方式控制视图堆栈的选定状态。注意：您不能将两个按钮栏都设置为ViewStack的数据提供程序，但您可以使用selectedIndex属性管理其状态。

您可以使用Adobe的选项卡式ViewNavigator Abbarskin在

顶部=“0”

和

底部=“0”

添加两个按钮栏：

---

这似乎对我有用：

我更新了帖子并添加了一些代码..我不确定；但是，您的皮肤不会引用任何一个选项卡式ViewNavigator实例进行定位或调整大小。如果您没有调整或定位它们中的任何一个，这可能是它们的显示不正确的原因。它们不是都位于0,0的正上方吗？由于两个标签条都位于100%的高度，因此一个标签条覆盖另一个标签条似乎是合乎逻辑的。是的，你说得对！只有最后一个TabbedViewNavigator显示在另一个选项卡的顶部。但是如果我给它一个高度，则不会成功，因为TabbedViewNavigator是从屏幕顶部开始创建的，并且是相同的场景。。但是我该如何改变呢？在这种情况下，我想合并顶部和底部的视图，使它们兼容，以便放置在同一视图中。。。或者有另一种解决方案，在每个视图上创建相同的TabbanAvigator，以产生顶部和底部选项卡栏的效果。但即使这样也不会产生这种效果。。。

<View>
  <ButtonBar />
  <ViewStack>
    <NavigatorContent>
      <MyView/>
    </NavigatorContent>
    ...
  </ViewStack>
  <ButtonBar />
</View>

<s:ButtonBar requireSelection="true" 
             width="100%" 
             bottom="0" 
             skinClass="spark.skins.mobile.TabbedViewNavigatorTabBarSkin">
    <s:ArrayCollection>
        <fx:Object label="View1" />
        <fx:Object label="View2" />
        <fx:Object label="View3" />
        <fx:Object label="View4" />
        <fx:Object label="View5" />
    </s:ArrayCollection>
</s:ButtonBar>