[组件开发] flex 4 s：dropdownlist 垂直下拉滚动条 样式重写

主APP  main.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_DropDownList_PopUp_placement_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
		minHeight="300"
		skinClass="skins.ApplicationSkin">
	<fx:Script>
		<![CDATA[
		]]>
	</fx:Script>
 
	<!--<s:Scroller height="200">-->
		<s:VGroup height="600">
			
			<s:DropDownList id="dropDownList"
							labelField="label"
							requireSelection="true"
							skinClass="skins.CustomDropDownListSkin"
							horizontalCenter="0"
							top="20">
				<s:dataProvider>
					<s:ArrayList>
						<fx:Object label="The" />
						<fx:Object label="Quick" />
						<fx:Object label="Brown" />
						<fx:Object label="Fox" />
						<fx:Object label="Jumps" />
						<fx:Object label="Over" />
						<fx:Object label="The" />
						<fx:Object label="Lazy" />
						<fx:Object label="Dog" />
					</s:ArrayList>
				</s:dataProvider>
			</s:DropDownList>
			
		</s:VGroup>
		
	<!--</s:Scroller>-->
    
 
</s:Application>

CustomDropDownListSkin.mxml的代码:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomDropDownListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5"> 
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.DropDownList")]
    ]]>
    </fx:Metadata> 
 
    <!--- The PopUpAnchor control that opens the drop-down list. -->
    <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
            left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
            popUpPosition="left" popUpWidthMatchesAnchorWidth="true">
        <!--- The drop down area of the skin. This includes borders, background colors, scrollers, and filters. -->
        <s:Group id="dropDown" maxHeight="134" minHeight="22" >
            <!-- drop shadow -->
            <s:RectangularDropShadow blurX="20" blurY="20" alpha="1.0" distance="5" 
                    angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
            <!-- border -->
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke color="0x686868" 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>
 
            <s:Scroller left="0" top="0" right="0" bottom="0" focusEnabled="false" minViewportInset="1">
                <!--- The container for the data items in the drop-down list. -->
                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                    <s:layout>
                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                    </s:layout>
                </s:DataGroup>
            </s:Scroller>
        </s:Group>
    </s:PopUpAnchor>
 
    <!--- The anchor button used by the DropDownList. The default skin is DropDownListButtonSkin. -->
    <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
            skinClass="spark.skins.spark.DropDownListButtonSkin" />  
    <!--- The prompt area of the DropDownList. -->
   <!-- <s:SimpleText id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1"
            left="7" right="30" top="2" bottom="2" verticalCenter="1" /> -->
	<!--- @copy spark.components.DropDownList#labelDisplay -->
	<s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1" 
			 mouseEnabled="false" mouseChildren="false"
			 left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" /> 
 
</s:Skin>

ApplicationSkin.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:mx="library://ns.adobe.com/flex/mx" 
		xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:c="com.sununion.web.seller.component.*">
	
	<fx:Metadata>
		[HostComponent("spark.components.Application")]
	</fx:Metadata> 
	
	<s:states>
		<s:State name="normal" />
		<s:State name="disabled" />
	</s:states>
	
	<!--背景-->
	<!--<c:BackgroundComponent id="backgroundRect" left="0" right="0" top="0" bottom="0" />-->
	
	<!--滚动条-->
	<s:Scroller height="100%" width="100%" horizontalScrollPolicy="auto" verticalScrollPolicy="auto">
		<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />        
	</s:Scroller>
</s:Skin>

效果图如下：