zav*_*avr 3 apache-flex skins actionscript-3 flex-spark
对于Flex 4.6按钮,可以定义标签和图标:
<s:Button icon="{@Embed('assets/icon.png'}" label="Do the dance" />
Run Code Online (Sandbox Code Playgroud)
corrsesponding皮肤部分是:iconDisplay:BitmapImage
并且labelDisplay: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;
Run Code Online (Sandbox Code Playgroud)
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>
Run Code Online (Sandbox Code Playgroud)
所以可以显示一个标签,但皮肤没有,<s:BitmapImage id="iconDisplay">
因此我不明白当没有容器显示时图标是如何显示的?
这是因为具有iconDisplay 的ButtonSkin
扩展SparkButtonSkin
位于iconGroup中并与constructIconParts()一起显示.由于扩展类的mxml语法(使用<s:SparkButtonSkin>
ButtonSkin.mxml的根节点),因此不太清楚.
在按钮中显示可缩放的FXG图标也很棒:http: //hulstkamp.com/articles/flex-advanced-fxg-spark-icon-buttons/