Flex4中SkinnableContainer圆角边框设置

时间：2011-01-03 来源：朔月星辰℡

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>