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, backgroundcolors, 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 is0xFFFFFF. -->
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 isDropDownListButtonSkin. -->
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>