0

MX TabBar コンポーネントでは、iconField プロパティにより、各タブに異なるアイコンを表示できました。Spark では、TabBar にアイコンを追加する固有の方法はないようです。Spark の TabBar のアイコン サポートを実装する例はありますか? コンポーネントを拡張せずにこれを行う方法はありますか?

どうもありがとう！

4

4 に答える 4

2

1 週間かけて複数の方法を試してみた結果 (リストの一番上に表示されます)、タブ バーやその他のコンポーネントにスキニングを使用してアイコンを追加する、より簡単で効果的な方法を見つけました。

アイコンとラベルをデータに渡すだけで、カスタム コンポーネントを作成する必要はありません。

http://cookbooks.adobe.com/post_Tutorials_for_skinning_Spark_ButtonBar_component_w-16722.html

個人的には、タブバー/ビュースタックでコンテンツ ナビゲーターを使用していたので、アイコンを imageicon ではなく icon として渡しました。それに応じて変更を加えることができます。

于 2011-03-24T12:42:47.300 に答える
0

アイコンを Spark コンポーネントに追加するためのスキンを作成する必要があります。Flex 3 の MX コンポーネントほど単純ではありませんが (IMHO)、はるかに拡張可能です。

開始するのに役立ついくつかのリンクを次に示します。

于 2010-12-15T17:59:51.223 に答える
0

SDKバージョンのバグ/機能の欠落のようです：
http://forums.adobe.com/thread/552543
http://bugs.adobe.com/jira/browse/SDK-24331

とにかく、スキンを使用したソリューションに感謝します-非常に役立ちます

于 2011-01-26T23:11:21.890 に答える
0

後世のために以下に投稿している解決策を思いついたと思います。誰かがより良い方法を持っている場合は、その提案をいただければ幸いです。

<!-- main app: TabBar implementation -->

<s:TabBar
    dataProvider="{contentTabBarPrimaryDP}"
    skinClass="skins.ContentTabBarSkin"/>

<!-- skins.ContentTabBarSkin: ItemRenderer implementation -->

<s:DataGroup id="dataGroup" width="100%" height="100%">
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>

    <s:itemRenderer>
        <fx:Component>
            <custom:IconButtonBarButton
                label="{data.label}"
                icon="{data.icon}"
                skinClass="skins.ContentTabBarButtonSkin"/>
        </fx:Component>
    </s:itemRenderer>
</s:DataGroup>

<!-- skins.ContentTabBarButtonSkin: icon implementation -->

<s:HGroup       
    gap="3"
    paddingBottom="3"
    paddingLeft="3"
    paddingRight="3"
    paddingTop="3"
    verticalAlign="middle">

    <!--- layer 2: icon -->
    <s:BitmapImage id="iconDisplay"
        left="5"
        verticalCenter="0" />       

    <!--- layer 3: label -->
    <s:Label id="labelDisplay"
        textAlign="center"
        verticalAlign="middle"
        maxDisplayedLines="1"
        horizontalCenter="0" verticalCenter="1"
        left="10"
        right="10"
        top="2"
        bottom="2">
    </s:Label>

</s:HGroup>

このソリューションでは、ラベル テキストと埋め込みアイコン イメージをクラスとして格納する TabBar dataProvider のカスタム DTO オブジェクトを使用します。また、ButtonBarButton コンポーネントを拡張して、次のような iconDisplay SkinPart を追加する必要がありました。

[SkinPart(required="false")]
public var iconDisplay:BitmapImage;

このクラスには、アイコン クラス プロパティのゲッター/セッターもあり、次のようにアイコン ソースを設定します。

public function set icon(value:Class):void {

    _icon = value;

    if (iconDisplay != null)
        iconDisplay.source = _icon;

}

override protected function partAdded(partName:String, instance:Object):void {

    super.partAdded(partName, instance);

    if (icon !== null && instance == iconDisplay)
        iconDisplay.source = icon;      

}
于 2010-12-16T14:52:22.487 に答える