如何在Spark TabBar控件中添加多個圖標？

Question

在MX TabBar組件中，iconField屬性允許我們在每個選項卡中顯示不同的圖標。 在Spark中，似乎沒有一種固有的方法來向TabBar添加圖標。 有沒有人有一個為Spark的TabBar實現圖標支持的例子？ 有沒有一種方法可以在不擴展組件的情況下進行操作？

非常感謝！

Answer 1

嘿，花了一個星期試圖遵循多種方式，（你的名列榜首），我發現了一種更簡單有效的方法，可以在我的標簽欄或任何其他使用蒙皮的組件中添加圖標。

您無需創建自定義組件，只需通過數據傳遞圖標和標簽即可。

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

就個人而言，我使用內容導航器和tabbar / viewstack，我將圖標作為圖標而不是圖像圖標傳遞。 您可以進行相應的更改。

Answer 2

您必須創建一個外觀，用於向Spark組件添加圖標。 它不像Flex 3的MX組件那么簡單（恕我直言），但更具可擴展性。

以下是一些可能有助於您入門的鏈接：

• Tour de Flex Tabbar示例
• 標簽欄上的自定義皮膚
• 帶有皮膚的Flex標簽欄

Answer 3

我相信我已經提出了一個解決方案，我將在下面發布以供后人使用。 如果有人有更好的方法，我將不勝感激該建議。

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

此類還具有icon類屬性的getter / setter並設置圖標源，如下所示：

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;      

}

Answer 4

這似乎是您的SDK版本的錯誤/遺漏功能：
http://forums.adobe.com/thread/552543
http://bugs.adobe.com/jira/browse/SDK-24331

無論如何，感謝皮膚的解決方案 - 非常有幫助