apache-flex - Flex - 如何制作选项卡式面板

Question

我的应用程序有 3 个类别的按钮，我想要一个选项卡式面板，我可以使用它在 3 个类别之间切换，如下例所示：

我的应用程序是一个移动应用程序，所以我不能使用 mx 组件。当我尝试搜索移动标签式导航等时，我只提出了 viewnavigator 示例。

Answer 1

对于移动选项卡式应用程序，您只需使用TabbedViewNavigatorApplication类：

第一种方法

您的视图只是<s:View>用作根注释的 MXML 组件。

阅读您的评论，我发现您希望在您的视图中有一个标签栏。在普通 Flex 中，您可以使用 aTabBar并将其附加到 aViewStack但ViewStack在移动设备中不可用...因此您可以即兴使用状态，将 a 绑定TabBar到状态名称并根据状态隐藏/显示面板。这是一个例子：

第二种方法*

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

    <s:layout>
        <s:VerticalLayout />
    </s:layout>

    <s:states>
        <s:State name="One" />
        <s:State name="Two" />
        <s:State name="Three" />
    </s:states>

    <s:TabBar id="tabBar" width="100%" 
              change="currentState = tabBar.dataProvider[event.newIndex]">
        <s:ArrayCollection>
            {states.map(function(x) { return x.name; }) }
        </s:ArrayCollection>
    </s:TabBar>

    <s:Group includeIn="One" width="100%" height="100%">
        <s:Label text="Tab One" />
    </s:Group>

    <s:Group includeIn="Two" width="100%" height="100%">
        <s:Label text="Tab Two" />
    </s:Group>

    <s:Group includeIn="Three" width="100%" height="100%">
        <s:Label text="Tab Three" />
    </s:Group>

</s:View>

但是，您可能仍希望保留移动标签导航功能，但仅限于一个特定视图。您可以TabbedViewNavigator在视图中包含 a ，而不是使用TabbedViewNavigatorApplication.

第三种方法

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

    <s:TabbedViewNavigator width="100%" height="100%">
        <s:ViewNavigator label="1st Tab" width="100%" height="100%" 
                         firstView="views.FirstTabView"/>
        <s:ViewNavigator label="2nd Tab" width="100%" height="100%" 
                         firstView="views.SecondTabView"/>
        <s:ViewNavigator label="3rd Tab" width="100%" height="100%" 
                         firstView="views.ThirdTabView"/>
    </s:TabbedViewNavigator>

</s:View>

您将获得一个嵌套的“操作栏”，因此您可以通过设置禁用每个选项卡视图中的嵌套操作栏actionBarVisible="false"

希望这可以帮助！！！！