Flex4 圆角效果

Flex4中SkinnableContainer圆角边框设置 ：

Flex4中BorderContainer有一个cornerRadius属性，通过设置该属性，即可实现圆角边框效果，但设置这个属性后，4个角都会变圆，有的时候可能会有这么一种需求：我只需要设置某一两个角变圆，或者几个圆角的弧度都不一样，这个时候，cornerRadius属性的设置显然就不能满足需求。 
ps:在Flex4之前可以设置borderSides属性达到类似效果，如：borderSides="top left right" 
在Flex4中borderSides属性貌似已经没有了（其实flex3中很多的属性，在flex4中都没有了，已经换了其他实现方式） 
那么，在flex4中要如何做才能达到上面说的效果呢？ 
看代码： 
首先，写一个skin： 

Mxml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.         xmlns:s="library://ns.adobe.com/flex/spark"   
4.         xmlns:mx="library://ns.adobe.com/flex/mx"  
5.         alpha.disabled="0.5">  
6.       
7.     <!-- host component -->  
8.     <fx:Metadata>  
9.         [HostComponent("spark.components.SkinnableContainer")]  
10.     </fx:Metadata>  
11.       
12.     <!-- states -->  
13.     <s:states>  
14.         <s:State name="disabled" />  
15.         <s:State name="normal" />  
16.     </s:states>  
17.       
18.     <!-- SkinParts  
19.     name=contentGroup, type=spark.components.Group, required=false  
20.     -->  
21.       
22.     <s:Rect left="0" top="0" right="0" width="100%" height="100%"   
23.             topLeftRadiusX="25">  
24.         <s:stroke>  
25.             <s:SolidColorStroke color="#AEADB0" alpha="0.5" scaleMode="none"/>  
26.         </s:stroke>  
27.         <s:fill>  
28.             <mx:LinearGradient>  
29.                 <mx:entries>  
30.                     <mx:GradientEntry color="0x333333" ratio="0.00" alpha="0.5"/>  
31.                     <mx:GradientEntry color="0xfefef3" ratio="0.33" alpha="0.5"/>  
32.                     <mx:GradientEntry color="0x333333" ratio="0.66" alpha="0.5"/>  
33.                 </mx:entries>  
34.             </mx:LinearGradient>  
35.         </s:fill>  
36.     </s:Rect>  
37.       
38.     <s:Group id="contentGroup" left="1" right="1" top="1" bottom="1"/>  
39. </s:Skin>  

使用这个skin： 

Mxml代码  

1. <s:SkinnableContainer width="20%" height="50" top="2" horizontalCenter="0"  
2.                       skinClass="com.flyhigh.skin.BorderContainerSkin">  
3.           
4. </s:SkinnableContainer>  

转自： http://www.cnblogs.com/syxc/archive/2011/01/03/1925030.html  
圆角TextInput  
在flex4中spark布局的样式都是用skin来控制，不像flex3中的mx可以使用属性来控制样式。所以spark控件已经没有了cornerRadius属性，所以要实现圆角输入框，就需要使用skin来实现。以下是实现代码，一看就明白。 
DateFieldSkin:  

Mxml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Skin  
3.     xmlns:fx="http://ns.adobe.com/mxml/2009"  
4.     xmlns:s="library://ns.adobe.com/flex/spark">  
5.   
6.     <s:states>  
7.         <s:State name="normal"/>  
8.         <s:State name="disabled"/>  
9.     </s:states>  
10.   
11.     <!---@private -->  
12.     <s:Rect id="border" left="0" right="0" top="0" bottom="0"  
13.         radiusX="{getStyle('cornerRadius')}" radiusY="{getStyle('cornerRadius')}">  
14.         <s:stroke>            
15.             <!---@private -->  
16.             <s:SolidColorStroke id="borderStroke" color="0x5380D0"/>  
17.         </s:stroke>  
18.         <s:fill>  
19.             <!---@private -->  
20.             <s:SolidColor id="bgFill" color="0xFFFFFF"/>  
21.         </s:fill>  
22.     </s:Rect>  
23. </s:Skin>  

Sample App:  
<?xml version="1.0" encoding="utf-8"?> 

Xml代码  

1. <s:Application  
2.     xmlns:fx="http://ns.adobe.com/mxml/2009"  
3.     xmlns:s="library://ns.adobe.com/flex/spark"  
4.     xmlns:mx="library://ns.adobe.com/flex/halo"  
5.     minWidth="1024" minHeight="768">  
6.   
7.     <fx:Style>  
8.         @namespace s "library://ns.adobe.com/flex/spark";  
9.         @namespace mx "library://ns.adobe.com/flex/mx";  
10.   
11.         .roundedTI  
12.         {  
13.             corner-radius:10;  
14.             borderStyle: solid;  
15.             borderSkin: ClassReference("DateFieldSkin");  
16.         }  
17.   
18.     </fx:Style>  
19.   
20.     <mx:DateField textInputStyleName="roundedTI"/>  
21.   
22. </s:Application>