Flex - как сделать панель с вкладками - PullRequest
4 голосов
/ 30 сентября 2011

Мое приложение имеет 3 категории кнопок, я хочу иметь панель с вкладками, которую можно использовать для переключения между 3 категориями, как в этом примере :

Мое приложение мобильное, поэтому я не могу использовать компоненты mx. Когда я пытаюсь найти мобильную навигацию с вкладками и т. Д., Я придумываю только примеры viewnavigator.

1 Ответ

4 голосов
/ 30 сентября 2011

Для мобильного приложения с вкладками вы просто используете TabbedViewNavigatorApplication класс:

ПЕРВЫЙ МЕТОД

Ваши представления - это просто компоненты MXML, которые используют<s:View> в качестве корневой заметки.

Читая ваши комментарии, я вижу, что вам нужна панель с вкладками в вашем представлении.В обычном 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"

Надеюсь, это поможет !!!!

...