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

 

 

评论

1 楼 fjkdashg 2013-11-05  

FB4.7
我在 一个s:button 里直接绑定 skinClass   修改skinClass文件添加上面的s：graphic标签内容

设置button onIcon属性  但是无法识别onIcon属性啊  程序报错无法运行

把 图片位置 放到skinClass文件中就可以使用


难道 一定要 自定义类么？？？  有没有别的方法