flex4 的DropdownList下拉框组件本身并不支持下拉框图片,但是可以结合条目渲染器和皮肤使其显示图片。 dropdownlist皮肤代码: <?xml version="1.0" encoding="utf-8"?> <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" xmlns:mx="library://ns.adobe.com/flex/mx"> <!-- 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" maxHeight="134" minHeight="22"> <!--- @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> <s:Rect id="background" left="1" right="1" top="1" bottom="1"> <s:fill> <s:SolidColor id="bgFill" color="0xFFFFFF"/> </s:fill> </s:Rect> <!--- @private --> <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1"> <s:DataGroup id="dataGroup" itemRenderer="bpm.graphic.DropdownlistItemrenderer"> <s:layout> <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/> </s:layout> </s:DataGroup> </s:Scroller> </s:Group> </s:PopUpAnchor> <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false" skinClass="spark.skins.spark.DropDownListButtonSkin"/> <!--- @copy spark.components.DropDownList#labelDisplay --> <mx:Image id="image" left="2" verticalCenter="0" source="{hostComponent.selectedItem.source}"/> <s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1" mouseEnabled="false" mouseChildren="false" left="20" right="30" top="2" bottom="2" width="75" verticalCenter="1"/> </s:SparkSkin> 条目渲染器: <?xml version="1.0" encoding="utf-8"?> <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" autoDrawBackground="true" creationComplete="itemrenderer1_creationCompleteHandler(event)"> <fx:Script> <!--[CDATA[ import com.benstucki.utilities.IconUtility; import mx.events.FlexEvent; protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void { trace(data); } ]]--> </fx:Script> <s:HGroup height="30" verticalAlign="middle" > <mx:Image id="image" source="{data.source!=null?data.source:null}"/> <s:Label text="{data.label}"/> </s:HGroup> </s:ItemRenderer> 其使用代码: positionDDL.setStyle("skinClass", DropdownListSkin); positionArray=new ArrayCollection([{label: "最前", source: "../resources/bringtofront.png"}, {label: "前移", source: "../resources/bringforward.png"}, {label: "后移", source: "../resources/sendbackward.png"}, {label: "最后", source: "../resources/sendtoback.png"}]) positionDDL.dataProvider=positionArray; positionDDL.selectedIndex=0;