[组件开发] 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>

效果图如下：