对于Flex 4.6 Button,可以定义标签和图标:

<s:Button icon="{@Embed('assets/icon.png'}" label="Do the dance" />

对应的皮肤部分是:iconDisplay:BitmapImagelabelDisplay:IDisplayText,由组件(adobe ref)设置。它们在ButtonBase.as中定义

spark.components.supportClasses.ButtonBase
//--------------------------------------------------------------------------
//
//  Skin parts
//
//--------------------------------------------------------------------------

[SkinPart(required="false")]

/**
 *  A skin part that defines an optional icon for the button.
 *
 *  @langversion 3.0
 *  @playerversion Flash 10.1
 *  @playerversion AIR 2.0
 *  @productversion Flex 4.5
 */
public var iconDisplay:BitmapImage;

[SkinPart(required="false")]

/**
 *  A skin part that defines the label of the button.
 *
 *  @langversion 3.0
 *  @playerversion Flash 10
 *  @playerversion AIR 1.5
 *  @productversion Flex 4
 */
public var labelDisplay:IDisplayText;

spark.components.Button扩展了ButtonBase并添加了一些新样式和_emphasized属性,但未提及有关iconDisplay的任何内容。因此在我看来,用于实际绘制按钮的唯一类是外观类。如果我们转到spark.skins.spark.ButtonSkin(它是Flex使用的默认外观)(或者是?),我们将发现:
<!-- layer 8: text -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->
    <s:Label id="labelDisplay"
             textAlign="center"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
             left="10" right="10" top="2" bottom="2">
    </s:Label>

这样可以显示标签,但是皮肤没有<s:BitmapImage id="iconDisplay">,因此我不明白当没有容器显示时该图标如何显示?

最佳答案

这是因为ButtonSkin扩展了SparkButtonSkin,后者已将iconDisplay放置在iconGroup中,并与ConstructIconParts()一起显示。由于用于扩展类的mxml语法(使用<s:SparkButtonSkin>作为ButtonSkin.mxml的根节点),它不是很清楚。

在按钮中显示可扩展的FXG图标也有很好的外观:
http://hulstkamp.com/articles/flex-advanced-fxg-spark-icon-buttons/

10-06 05:47