dropdownlist的皮肤1自定义，达到一下效果：

1.label 字体改变

2.长度宽度背景色改变content..corol

3.下拉框的背景色改变,鼠标滚动和选择时候的条目背景变橙色

4.小三角的button无边框

5.没有高光效果


基本皮肤：skin_dropdownlist


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

<!--


   ADOBE SYSTEMS INCORPORATED

   Copyright 2008 Adobe Systems Incorporated

   All Rights Reserved.


   NOTICE: Adobe permits you to use, modify, and distribute this file

   in accordance with the terms of the license agreement accompanying it.


-->

<!--- The default skin class for the Spark DropDownList component.

     The skin for the anchor button for a DropDownList component

     is defined by the DropDownListButtonSkin class.  


     <p>In a custom skin class that uses transitions, set the

     <code>itemDestructionPolicy</code> property to <code>none</code>

     for the PopUpAnchor defined by the popUp property.</p>      


     @see spark.components.DropDownList        

     @see spark.skins.spark.DropDownListButtonSkin


     @langversion 3.0

     @playerversion Flash 10

     @playerversion AIR 1.5

     @productversion Flex 4

-->

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

   xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5">


   <!-- host component -->

   <fx:Metadata>

   <![CDATA[

       /**

        * @copy spark.skins.spark.ApplicationSkin#hostComponent

        */

       [HostComponent("spark.components.DropDownList")]

   ]]>

   </fx:Metadata>


   <fx:Script fb:purpose="styling">

       <![CDATA[            


           /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */

           static private const contentFill:Array = ["bgFill"];


           /**

            * @private

            */

           override public function get contentItems():Array {return contentFill};

                       /**

            * @private

            */

           override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

           {

               if (getStyle("borderVisible") == false)

               {

                   if (border)

                       border.visible = false;

                   if (background)

                   {

                       background.left = background.top = background.right = background.bottom = 0;

                   }

                   if (scroller)

                       scroller.minViewportInset = 0;

               }

               else

               {

                   if (border)

                       border.visible = true;

                   if (background)

                   {

                       background.left = background.top = background.right = background.bottom = 1;

                   }

                   if (scroller)

                       scroller.minViewportInset = 1;

               }


               if (dropShadow)

                   dropShadow.visible = getStyle("dropShadowVisible");


               openButton.setStyle("cornerRadius", getStyle("cornerRadius"));


               if (borderStroke)

               {

                   borderStroke.color = getStyle("borderColor");

                   borderStroke.alpha = getStyle("borderAlpha");

               }

               super.updateDisplayList(unscaledWidth, unscaledHeight);

           }

       ]]>

   </fx:Script>


   <s:states>

       <s:State name="normal" />

       <s:State name="open" />

       <s:State name="disabled" />

   </s:states>


   <!---

       The PopUpAnchor control that opens the drop-down list.


       <p>In a custom skin class that uses transitions, set the

       <code>itemDestructionPolicy</code> property to <code>none</code>.</p>

   -->

   <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"

       left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"

       popUpPosition="below" popUpWidthMatchesAnchorWidth="true">


       <!---

             This includes borders, background colors, scrollers, and filters.

             @copy spark.components.supportClasses.DropDownListBase#dropDown

       -->

       <s:Group id="dropDown">


           <!--- @private -->

           <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7"

                angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>


           <!--- @private -->

           <s:Rect id="border" left="0" right="0" top="0" bottom="0" >

               <s:stroke>

                   <!--- border stroke @private -->

                   <s:SolidColorStroke id="borderStroke" weight="1"/>

               </s:stroke>

           </s:Rect>


           <!-- fill 下拉框的背景色-->

           <!--- Defines the appearance of drop-down list's background fill. -->

           <s:Rect id="background" left="1" right="1" top="1" bottom="1" >

               <s:fill>

               <!---  

                   The color of the drop down's background fill.

                   The default color is 0xFFFFFF.

               -->

                   <s:SolidColor id="bgFill" color="0xffffff" />

               </s:fill>

           </s:Rect>


           <!--- @private -->

           <s:Scroller   skinClass="skins.skin_scroller" id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1"  >

               <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->

               <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">

                   <s:layout>

                       <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/>

                   </s:layout>

               </s:DataGroup>

           </s:Scroller>

       </s:Group>

   </s:PopUpAnchor>


   <!---  The default skin is DropDownListButtonSkin.

           @copy spark.components.supportClasses.DropDownListBase#openButton

           @see spark.skins.spark.DropDownListButtonSkin -->

   <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false" tabEnabled="false"

      skinClass="skins.skin_droplistbtn"/>  


   <!--- @copy spark.components.DropDownList#labelDisplay -->

   <s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1"

       mouseEnabled="false" mouseChildren="false" fontFamily="Arial" fontSize="14"

       left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" />


</s:SparkSkin>


btn重构：

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


<!--


   ADOBE SYSTEMS INCORPORATED

   Copyright 2008 Adobe Systems Incorporated

   All Rights Reserved.


   NOTICE: Adobe permits you to use, modify, and distribute this file

   in accordance with the terms of the license agreement accompanying it.


-->


<!--- The default skin class for the Spark Button component.  


      @see spark.components.Button


     @langversion 3.0

     @playerversion Flash 10

     @playerversion AIR 1.5

     @productversion Flex 4

-->

<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"

            xmlns:s="library://ns.adobe.com/flex/spark"

            xmlns:fb="http://ns.adobe.com/flashbuilder/2009"

            minWidth="21" minHeight="21"

            alpha.disabled="0.5">


   <fx:Metadata>

       <![CDATA[

       /**

        * @copy spark.skins.spark.ApplicationSkin#hostComponent

        */

       [HostComponent("spark.components.Button")]

       ]]>

   </fx:Metadata>


   <fx:Script fb:purpose="styling">

       <![CDATA[        

           import spark.components.Group;

           /* Define the skin elements that should not be colorized.

           For button, the graphics are colorized but the label is not. */

           static private const exclusions:Array = ["labelDisplay"];


           /**

            * @private

            */    

           override public function get colorizeExclusions():Array {return exclusions;}


           /**

            * @private

            */

           override protected function initializationComplete():void

           {

               useChromeColor = true;

               super.initializationComplete();

           }  




       ]]>        

   </fx:Script>


   <!-- states -->

   <s:states>

       <s:State name="up" />

       <s:State name="over" />

       <s:State name="down" />

       <s:State name="disabled" />

   </s:states>




   <!-- layer 2: fill -->

   <!--- @private -->

   <s:Rect id="fill" left="1" right="1" top="1" bottom="1" >

       <s:fill>

           <s:LinearGradient rotation="90">

               <s:GradientEntry color="0xFFFFFF"

                                color.over="0xFFFFFF"

                                color.down="0xFFFFFF"

                                alpha="1" />

               <s:GradientEntry color="0xFFFFFF"

                                color.over="0xFFFFFF"

                                color.down="0xFFFFFF"

                                alpha="1" />

           </s:LinearGradient>

       </s:fill>

   </s:Rect>


   <!-- layer 3: fill lowlight -->

   <!--- @private -->

   <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1">

       <s:fill>

           <s:LinearGradient rotation="270">

               <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />

               <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />

               <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />

           </s:LinearGradient>

       </s:fill>

   </s:Rect>




   <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->

   <!--- @private -->

   <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" >

       <s:stroke>

           <s:LinearGradientStroke rotation="90" weight="1">

               <s:GradientEntry color="0x000000"

                                alpha="0.5625"

                                alpha.down="0.6375" />

               <s:GradientEntry color="0x000000"

                                alpha="0.75"

                                alpha.down="0.85" />

           </s:LinearGradientStroke>

       </s:stroke>

   </s:Rect>


   <!-- layer 8: text -->

   <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->

   <s:Label id="labelDisplay"

            textAlign="center"

            maxDisplayedLines="1"  fontFamily="Arial" fontSize="14"

            horizontalCenter="0" verticalCenter="1" verticalAlign="middle"

            left="10" right="10" top="2" bottom="2">

   </s:Label>

<!-- layer 9: arrow -->

<!--- The arrow graphic displayed in the anchor button. -->

<s:Path right="6" verticalCenter="0" id="arrow"

data="M 4.0 4.0 L 4.0 3.0 L 5.0 3.0 L 5.0 2.0 L 6.0 2.0 L 6.0 1.0 L 7.0 1.0 L 7.0 0.0 L 0.0 0.0 L 0.0 1.0 L 1.0 1.0 L 1.0 2.0 L 2.0 2.0 L 2.0 3.0 L 3.0 3.0 L 3.0 4.0 L 4.0 4.0">

<s:fill>

<s:RadialGradient rotation="90" focalPointRatio="1">  

<!--- @private

The first part of the arrow's gradient fill.

The default alpha is .6. The default color if 0x000000. -->

<s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />

<!--- @private

The second part of the arrow's gradient fill.

The default alpha is .6. The default color if 0x000000. -->

<s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />

</s:RadialGradient>

</s:fill>

</s:Path>


</s:SparkButtonSkin>