Flex skin 制作相关

http://flex2.group.iteye.com/group/blog/840255

Flex4中BorderContainer有一个cornerRadius属性,通过设置该属性,即可实现圆角边框效果,但设置这个属性后,4个角都会变圆,有的时候可能会有这么一种需求:我只需要设置某一两个角变圆,或者几个圆角的弧度都不一样,这个时候,cornerRadius属性的设置显然就不能满足需求。

ps:在Flex4之前可以设置borderSides属性达到类似效果,如:borderSides="top left right"
在Flex4中borderSides属性貌似已经没有了(其实flex3中很多的属性,在flex4中都没有了,已经换了其他实现方式)

那么,在flex4中要如何做才能达到上面说的效果呢?

看代码:
首先,写一个skin:
<?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" 
		xmlns:mx="library://ns.adobe.com/flex/mx"
		alpha.disabled="0.5">
	
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.SkinnableContainer")]
	</fx:Metadata>
	
	<!-- states -->
	<s:states>
		<s:State name="disabled" />
		<s:State name="normal" />
	</s:states>
	
	<!-- SkinParts
	name=contentGroup, type=spark.components.Group, required=false
	-->
	
	<s:Rect left="0" top="0" right="0" width="100%" height="100%" 
			topLeftRadiusX="25">
		<s:stroke>
			<s:SolidColorStroke color="#AEADB0" alpha="0.5" scaleMode="none"/>
		</s:stroke>
		<s:fill>
			<mx:LinearGradient>
				<mx:entries>
					<mx:GradientEntry color="0x333333" ratio="0.00" alpha="0.5"/>
					<mx:GradientEntry color="0xfefef3" ratio="0.33" alpha="0.5"/>
					<mx:GradientEntry color="0x333333" ratio="0.66" alpha="0.5"/>
				</mx:entries>
			</mx:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<s:Group id="contentGroup" left="1" right="1" top="1" bottom="1"/>
</s:Skin>

使用这个skin:
<s:SkinnableContainer width="20%" height="50" top="2" horizontalCenter="0"
				      skinClass="com.flyhigh.skin.BorderContainerSkin">
		
	</s:SkinnableContainer>


你可能感兴趣的:(xml,Flex,Blog,ITeye)