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组件那样简单（恕我直言），但更具可扩展性。

以下是一些可能有助于您入门的链接：

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

无论如何，感谢皮肤的解决方案 - 非常有帮助

如何在Spark TabBar控件中添加多个图标？

4 个答案: