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" skinClass="skins.MyIconSkin"> <fx:Script> <![CDATA[ [Bindable] public var icon:Object; ]]> </fx:Script> </s:Button>
comp/MyIconButton.mxml
<?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>