flex自定义按钮皮肤

最新推荐文章于 2020-04-02 18:09:58 发布

真理孤独

最新推荐文章于 2020-04-02 18:09:58 发布

阅读量1.5k

点赞数

分类专栏：工作相关文章标签： flex 自定义按钮皮肤 skin.mxml

本文链接：https://blog.csdn.net/u011427934/article/details/23670519

版权

工作相关专栏收录该内容

58 篇文章 1 订阅

订阅专栏

先看效果图：

其中Test.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" minWidth="955" minHeight="600">	                          			
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:HBox horizontalCenter="0" verticalCenter="1">
		<s:Button id="rightButton"  skinClass="components.RightButtonSkin" />
		<s:Button id="cancelButton"  skinClass="components.CancelButtonSkin" />
		<s:Button id="newStyleButton"   skinClass="components.NewStyleButtonSkin"/>	
		<s:Button id="StyleButton"   skinClass="components.StyleButtonSkin"/>
	</mx:HBox>
</s:Application>

RightButtonSkin.mxml(确定按钮皮肤)：

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">
	
	<!-- states -->
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
	</s:states>

	<!-- border and fill -->
	<s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" 
			bottom="0" left="0">
		<s:fill>
			<s:SolidColor color="0xFAFAFA" color.over="0xEEEEEE" 
						  color.down="0xEEEEEE"/>
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke color="0xCCCCCC" weight="1"/>
		</s:stroke>
	</s:Rect>
	
	<!-- highlight on top -->
	<s:Rect radiusX="4" radiusY="4" top="2" right="2" left="2" 
			height="50%">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0xFFFFFF" alpha=".5"/>
				<s:GradientEntry color="0xFFFFFF" alpha=".1"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<s:Label text="确定" color="0x131313"  
			 textAlign="center"
			 fontFamily="宋体"
			 verticalAlign="middle"
			 horizontalCenter="0" verticalCenter="1"
			 left="30" right="30" top="8" bottom="8" 
			 />
</s:Skin>

NewStyleButtonSkin.mxml(新建按钮皮肤)：

ps：新建按钮上面那个icon是画上去的

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">
	
	<!-- states -->
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
	</s:states>

	<!-- border and fill -->
	<s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" 
			bottom="0" left="0">
		<s:fill>			
			<s:SolidColor color="0xFAFAFA" color.over="0xEEEEEE" color.down="0xEEEEEE"/>
		</s:fill>
	
		<s:stroke>
			<s:SolidColorStroke color="0xCCCCCC" weight="1"/>
		</s:stroke>
	</s:Rect>
	
	<!-- highlight on top -->
	<s:Rect radiusX="4" radiusY="4" top="2" right="2" left="2" 
			height="50%">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0xFFFFFF" alpha=".5"/>
				<s:GradientEntry color="0xFFFFFF" alpha=".1"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	<s:Graphic> 
		<s:BitmapImage source="assets/round_plus2.png" left="8" top="6"/>
	</s:Graphic>		
	<s:Label text="新建样式" color="0x131313"  
			 fontFamily="宋体"
			 left="30" right="20" top="8" bottom="8" 
			 />
	
</s:Skin>