Flex 自定义Button的图片皮肤
comp/MyIconButton.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" skinname="code"><?xml version="1.0" encoding="utf-8"?> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5" xmlns:mx="library://ns.adobe.com/flex/mx"> <!-- host component --> <fx:Metadata> <![CDATA[ /** * @copy spark.skins.spark.ApplicationSkin#hostComponent */ [HostComponent("MyIconButton")] ]]> </fx:Metadata> <s:states><s:State name="up" /><s:State name="over" /><s:State name="down" /><s:State name="disabled" /></s:states><s:Graphic><s:BitmapImage source.up="{hostComponent.upIcon}" source.over="{hostComponent.overIcon}" source.down="{hostComponent.downIcon}" source.disabled="{hostComponent.disabledIcon}"/></s:Graphic><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:SparkSkin>
?
ButtonWithIcon.mxml
?
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:comp="*" minWidth="955" minHeight="600"><fx:Declarations><!-- 将非可视元素(例如服务、值对象)放在此处 --></fx:Declarations><comp:MyIconButton x="36" y="350" upIcon="@Embed('images/mDeleteBtn_1.png')" overIcon="@Embed('images/mDeleteBtn_1.png')" downIcon="@Embed('images/mDeleteBtn_2.png')" disabledIcon="@Embed('images/mDeleteBtn_1.png')" useHandCursor="true" buttonMode="true"/><comp:MyIconButton x="36" y="450" upIcon="@Embed('images/loginBtn_1.png')" overIcon="@Embed('images/loginBtn_1.png')" downIcon="@Embed('images/loginBtn_2.png')" disabledIcon="@Embed('images/loginBtn_1.png')" useHandCursor="true" buttonMode="true"/> </s:Application>?
?