0

在 MX TabBar 组件中，iconField 属性允许我们在每个选项卡中显示不同的图标。在 Spark 中，似乎没有将图标添加到 TabBar 的固有方法。有没有人有一个为 Spark 的 TabBar 实现图标支持的例子？有没有办法在不扩展组件的情况下做到这一点？

非常感谢！

4

4 回答 4

2

嘿，在花了一周时间尝试遵循多种方式之后，（你的方式排在首位）我发现了一种更简单有效的方式来将图标添加到我的标签栏或使用皮肤的任何其他组件。

您不需要创建自定义组件，只需通过数据传递图标和标签。

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

就个人而言，我在标签栏/视图堆栈中使用内容导航器，我将图标作为图标而不是 imageicon 传递。您可以进行相应的更改。

于 2011-03-24T12:42:47.300 回答
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;

此类还具有图标类属性的 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;      

}
于 2010-12-16T14:52:22.487 回答
0

你必须创建一个皮肤来为 Spark 组件添加图标；它不像 Flex 3 的 MX 组件那么简单（恕我直言），但可扩展性更高。

以下是一些可以帮助您入门的链接：

于 2010-12-15T17:59:51.223 回答