【问题标题】:Why does the default spark button skin not have iconDisplay tag?为什么默认的 spark 按钮皮肤没有 iconDisplay 标签?
【发布时间】:2014-06-17 10:07:28
【问题描述】:

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

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

这样可以显示一个标签,但是皮肤没有&lt;s:BitmapImage id="iconDisplay"&gt;所以我不明白为什么没有容器显示图标时显示它?

【问题讨论】:

    标签: actionscript-3 apache-flex flex-spark skins


    【解决方案1】:

    这是因为ButtonSkin 扩展了SparkButtonSkin,它的iconDisplay 放置在iconGroup 中并使用constructIconParts() 显示。不是很清楚,因为扩展类的 mxml 语法(使用 &lt;s:SparkButtonSkin&gt; 作为 ButtonSkin.mxml 的根节点)。

    还有一个很棒的皮肤可以在按钮中显示可缩放的 FXG 图标: http://hulstkamp.com/articles/flex-advanced-fxg-spark-icon-buttons/

    【讨论】:

      猜你喜欢
      • 2011-10-31
      • 2013-04-17
      • 1970-01-01
      • 1970-01-01
      • 2014-06-22
      • 1970-01-01
      • 1970-01-01
      • 2017-04-27
      • 1970-01-01
      相关资源
      最近更新 更多