我的应用程序具有3个类别的按钮,我希望有一个选项卡式面板,可以在以下示例中在3个类别之间进行切换:

我的应用程序是移动应用程序,尽管如此,我无法使用MX组件。当我尝试搜索移动选项卡式导航等时,我只提出了viewnavigator示例。

#1 楼

对于移动选项卡式应用程序,只需使用TabbedViewNavigatorApplication类:

第一方法







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

阅读您的注释,我看到您希望在视图中使用选项卡式栏。在普通Flex中,您将使用TabBar并将其附加到ViewStack,但是ViewStack在移动设备上不可用...因此您可以即兴使用状态,将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而不是使用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"

禁用每个选项卡视图中的嵌套视图。希望这会有所帮助!!!

评论


其实那不是我想要的。我不想改变看法。我有一个带有TextArea和一个包含按钮的容器的视图。我只希望容器具有按其功能对按钮进行分组的选项卡,而不更改视图。我可能有一个选项卡用于字体颜色,大小等,另一个选项卡用于段落格式设置,另一个选项卡用于其他内容。

–RapsFan1981
2011-09-30 15:46

@ RapsFan1981我添加了两种其他方法来执行此操作。一个可以让您完全控制所有按钮。您应该在这三个选项之间找到自己喜欢的东西。

–布赖恩·杰尼西奥(Brian Genisio)
2011年9月30日在16:30

@ RapsFan1981我应该提到,第三种选择可能是最好的选择,因为它是针对移动设备进行优化的。

–布赖恩·杰尼西奥(Brian Genisio)
2011年9月30日下午16:31

谢谢布莱恩。这很有帮助

–RapsFan1981
2011年10月7日19:48