Flex 圆角效果

转：http://godlewis.iteye.com/blog/1170205

 

 

SkinnableContainer圆角边框设置

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

 

圆角TextInput

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

    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>

    <!---@private -->
    <s:Rect id="border" left="0" right="0" top="0" bottom="0"
        radiusX="{getStyle('cornerRadius')}" radiusY="{getStyle('cornerRadius')}">
        <s:stroke>          
            <!---@private -->
            <s:SolidColorStroke id="borderStroke" color="0x5380D0"/>
        </s:stroke>
        <s:fill>
            <!---@private -->
            <s:SolidColor id="bgFill" color="0xFFFFFF"/>
        </s:fill>
    </s:Rect>
</s:Skin>