Flex教程:DropDownList中显示图片

Flex教程:DropDownList中显示图片-网页


Flex Gumbo中如何通过itemRenderer属性，DropDownList中显示图片

下面是main.mxml：

1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application name="Spark_DropDownList_itemRenderer_test"
3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
4.         xmlns:s="library://ns.adobe.com/flex/spark"
5.         xmlns:mx="library://ns.adobe.com/flex/halo">
6.     <s:DropDownList id="dropDownList"
7.             labelField="label"
8.             requireSelection="true"
9.             skinClass="skins.CustomDropDownListSkin"
10.             itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
11.             horizontalCenter="0"
12.             top="20">
13.         <s:dataProvider>
14.             <s:ArrayList>
15.                 <s:BitmapImage source="@Embed('assets/air_appicon-tn.gif')" />
16.                 <s:BitmapImage source="@Embed('assets/cf_appicon-tn.gif')" />
17.                 <s:BitmapImage source="@Embed('assets/dw_appicon-tn.gif')" />
18.                 <s:BitmapImage source="@Embed('assets/fl_appicon-tn.gif')" />
19.                 <s:BitmapImage source="@Embed('assets/fl_player_appicon-tn.gif')" />
20.                 <s:BitmapImage source="@Embed('assets/fw_appicon-tn.gif')" />
21.                 <s:BitmapImage source="@Embed('assets/fx_appicon-tn.gif')" />
22.                 <s:BitmapImage source="@Embed('assets/ai_appicon-tn.gif')" />
23.             </s:ArrayList>
24.         </s:dataProvider>
25.     </s:DropDownList>
26. </s:Application>

下面是skins/CustomDropDownListSkin.mxml的代码：

1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Skin name="CustomDropDownListSkin"
3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
4.         xmlns:s="library://ns.adobe.com/flex/spark"
5.         alpha.disabled="0.5"> 
6.     <!-- states -->
7.     <s:states>
8.         <s:State name="normal" />
9.         <s:State name="open" />
10.         <s:State name="disabled" />
11.     </s:states>
12.     <!-- host component -->
13.     <fx:Metadata>
14.     <![CDATA[
15.         [HostComponent("spark.components.DropDownList")]
16.     ]]>
17.     </fx:Metadata> 
18.     <!--- The PopUpAnchor control that opens the drop-down list. -->
19.     <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
20.             left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
21.             popUpPosition="below" popUpWidthMatchesAnchorWidth="true">
22.         <!--- The drop down area of the skin. This includes borders, background colors, scrollers, and filters. -->
23.         <s:Group id="dropDown" maxHeight="134" minHeight="22" >
24.             <!-- drop shadow -->
25.             <s:RectangularDropShadow blurX="20" blurY="20" alpha="1.0" distance="5" 
26.                  angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
27.             <!-- border -->
28.             <s:Rect left="0" right="0" top="0" bottom="0">
29.                 <s:stroke>
30.                     <s:SolidColorStroke color="0x686868" weight="1"/>
31.                 </s:stroke>
32.             </s:Rect>
33.             <!-- fill -->
34.             <!--- Defines the appearance of drop-down list's background fill. -->
35.             <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
36.                 <s:fill>
37.                     <!--- The color of the drop down's background fill. The default color is 0xFFFFFF. -->
38.                     <s:SolidColor id="bgFill" color="0xFFFFFF" />
39.                 </s:fill>
40.             </s:Rect>
41.             <s:Scroller left="0" top="0" right="0" bottom="0" focusEnabled="false" minViewportInset="1">
42.                 <!--- The container for the data items in the drop-down list. -->
43.                 <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
44.                     <s:layout>
45.                         <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
46.                     </s:layout>
47.                 </s:DataGroup>
48.             </s:Scroller>
49.         </s:Group>
50.     </s:PopUpAnchor>
51.     <!--- The anchor button used by the DropDownList. The default skin is DropDownListButtonSkin. -->
52.     <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
53.             skinClass="spark.skins.spark.DropDownListButtonSkin" /> 
54.     <s:BitmapImage source="{hostComponent.selectedItem.source}"
55.         left="10" right="30" top="10" bottom="10" />
56. </s:Skin>