Flex - 如何制作一个标签面板 [英] Flex - how to make a tabbed panel

问题描述

我的应用程序有3个类别的按钮，我想有一个选项卡式的面板，我可以用来在3个类别之间切换，如

我的应用程序是一个移动应用程序，尽管如此，我不能使用mx组件。当我尝试搜索移动选项卡式导航等时，我只提出了viewnavigator示例。 解决方案

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

第一种方法

您的视图仅仅是MXML组件，它们使用< s：View> 作为根音。

阅读你的评论，我看到你想在你的视图中的标签栏。在普通的Flex中，你可以使用 TabBar 并将它附加到 ViewStack ，但是 ViewStack 在移动设备中不可用...所以你可以使用状态，将 TabBar 绑定到状态的名字并隐藏/显示面板。州。这是一个例子：

第二种方法*

 < s：查看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：州> 
 < s：State name =Two/> 
 < / s：州> 
 
  change =currentState = tabBar.dataProvider [event.newIndex]> 
< s：ArrayCollection> 
 {states.map（function（x）{return x.name;}）} 
< / s：ArrayCollection> 
< / s：TabBar> 
 
  < / s：Group> 
 
  < / s：Group> 
 
  < / s：Group> 
 
< / s：查看> 
  

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

第三种方法

 < s：View xmlns：fx =http ：//ns.adobe.com/mxml/2009
 xmlns：s =library：//ns.adobe.com/flex/sparktitle =HomeView> 
 
< s：TabbedViewNavigator width =100％height =100％> 
  firstView =views.FirstTabView/> 
  firstView =views.SecondTabView/> 
  firstView =views.ThirdTabView/> 
< / s：TabbedViewNavigator> 
 
< / s：查看> 
  

您将得到一个嵌套的Action Bar，所以您可以在每个选项卡中禁用嵌套的通过设置 actionBarVisible =false

的意见，希望这会有所帮助!!!!

My app has 3 categories of buttons, I want to have a tabbed panel I can use to switch between the 3 categories like in this example:

My app is a mobile app though so I can't use mx components. When I try searching for mobile tabbed navigation etc., I come up with only viewnavigator examples.

解决方案

For a mobile tabbed application, you simply use the TabbedViewNavigatorApplication class:

FIRST METHOD

Your views are simply MXML components that use <s:View> as the root note.

Reading your comments, I see that you want a tabbed bar within your view. In normal Flex, you would use a TabBar and attach it to a ViewStack but ViewStack is not available in mobile... so you can improvise using states, binding a TabBar to the names of the states and hide/show panels based on state. Here is an example:

SECOND METHOD*

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

BUT, you might still want to keep the mobile tab navigation functionality but only for one particular view. You can include a TabbedViewNavigator inside of your view instead of using a TabbedViewNavigatorApplication.

THIRD METHOD

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

You will get a nested "Action Bar" so you can disable the nested one in each of the tab views by setting actionBarVisible="false"

Hope this helps!!!!

这篇关于Flex - 如何制作一个标签面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！