Question

我想在同一视图上添加底部和顶部标签栏 - 它是一个弹性移动视图。我试过这个，但是当我在一个视图上创建两个标签栏时，只查看其中一个 - 底部标签栏。但如果我删除底部的那个，它会显示上部标签栏。有关在同一屏幕上显示它们的任何建议吗？

<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>

这是我的TabbedViewNavigatorSkin：

override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
{
    super.layoutContents(unscaledWidth, unscaledHeight);

    var tabBarHeight:Number = 0; 

    if (tabBar.includeInLayout)
    {
        tabBarHeight = Math.min(tabBar.getPreferredBoundsHeight(), unscaledHeight);
        tabBar.setLayoutBoundsSize(unscaledWidth, tabBarHeight);
        tabBar.setLayoutBoundsPosition(0, 0);
        tabBarHeight = tabBar.getLayoutBoundsHeight(); 

        // backgroundAlpha is not a declared style on ButtonBar
        // TabbedViewNavigatorButtonBarSkin implements for overlay support
        var backgroundAlpha:Number = (_isOverlay) ? 0.75 : 1;
        tabBar.setStyle("backgroundAlpha", backgroundAlpha);
    }

    if (contentGroup.includeInLayout)
    {
        var contentGroupHeight:Number = (_isOverlay) ? unscaledHeight : Math.max(unscaledHeight - tabBarHeight, 0);
        contentGroup.setLayoutBoundsSize(unscaledWidth, contentGroupHeight);
        contentGroup.setLayoutBoundsPosition(0, tabBarHeight);
    }
}

我希望获得如下所示的视图：

enter image description here

Answer 1

我不认为你可以使用两个开箱即用的TabbedViewNavigator组件来做你想做的事。主要原因是每个人都希望将自己的View堆叠起来。

也许您可以使用mx：ViewStack组件，并使用两个ButtonBar组件驱动它。

所以你的View看起来像这样：

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

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

Answer 2

您可以在top="0"和bottom="0"处添加两个ButtonBars与Adobe的TabbedViewNavigatorTabBarSkin：

<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>

这似乎对我有用：Styling ButtonBar font in Flex mobile app - with screenshot attached

在同一视图上灵活移动底部和顶部选项卡视图

2 个答案: