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>