apache-flex - フレックス-タブ付きパネルの作り方

Question

私のアプリには3つのカテゴリのボタンがあります。この例のように、3つのカテゴリを切り替えるために使用できるタブ付きパネルが必要です。

私のアプリはモバイルアプリなので、mxコンポーネントを使用できません。モバイルタブ付きナビゲーションなどを検索しようとすると、viewnavigatorの例しか思いつきません。

Answer 1

モバイルタブ付きアプリケーションの場合は、TabbedViewNavigatorApplicationクラスを使用するだけです。

最初の方法

ビューは<s:View>、ルートノートとして使用する単なるMXMLコンポーネントです。

コメントを読むと、ビュー内にタブ付きのバーが必要であることがわかります。通常のFlexでは、を使用してTabBarにアタッチしますViewStackがViewStack、モバイルでは使用できません...したがって、状態を使用して即興TabBarで、状態の名前にaをバインドし、状態に基づいてパネルを非表示/表示できます。次に例を示します。

2番目の方法*

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

ただし、モバイルタブのナビゲーション機能を維持したい場合は、特定の1つのビューのみを使用してください。TabbedViewNavigatorを使用する代わりに、ビューの内部を含めることができますTabbedViewNavigatorApplication。

3番目の方法

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

お役に立てれば！！！！