Flex Gumbo中如何通过skinClass样式修改DropDownList下拉阴影效果的例子

By Minidxer | August 10, 2009

接下来的Flex Gumbo中如何通过skinClass样式，修改DropDownList下拉阴影效果。



下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="DropDownList_skinClass_filters_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns="library://ns.adobe.com/flex/halo">
  6.     <s:layout>
  7.         <s:BasicLayout />
  8.     </s:layout>
  9.  
  10.     <s:DropDownList id="dropDownList"
  11.             labelField="label"
  12.             selectedIndex="0"
  13.             requiresSelection="true"
  14.             skinClass="skins.CustomDropDownListSkin"
  15.             width="100"
  16.             horizontalCenter="0"
  17.             top="10">
  18.         <s:dataProvider>
  19.             <s:ArrayList>
  20.                 <fx:Object label="The" />
  21.                 <fx:Object label="Quick" />
  22.                 <fx:Object label="Brown" />
  23.                 <fx:Object label="Fox" />
  24.                 <fx:Object label="Jumps" />
  25.                 <fx:Object label="Over" />
  26.                 <fx:Object label="The" />
  27.                 <fx:Object label="Lazy" />
  28.                 <fx:Object label="Dog" />
  29.             </s:ArrayList>
  30.         </s:dataProvider>
  31.     </s:DropDownList>
  32.  
  33. </s:Application>

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:SparkSkin name="CustomDropDownListSkin.mxml"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         alpha.disabled="0.5">
  6.     <s:states>
  7.         <s:State name="normal" />
  8.         <s:State name="open" />
  9.         <s:State name="disabled" />
  10.     </s:states>
  11.  
  12.     <!-- host component -->
  13.     <fx:Metadata>
  14.         [HostComponent("spark.components.DropDownList")]
  15.     </fx:Metadata>
  16.  
  17.     <s:PopUp id="popup"
  18.             open.normal="false" open.open="true" includeIn="open"
  19.             left="0" right="0" top="0" bottom="0"
  20.             visible.open = "true" visible.normal="false"
  21.             placement="below">
  22.         <s:Group id="dropDown" maxHeight="134" minHeight="22"
  23.                 visible.open = "true" visible.normal="false">
  24.             <!-- border -->
  25.             <s:Rect left="0" right="0" top="0" bottom="0">
  26.                 <s:stroke>
  27.                     <s:SolidColorStroke color="0x686868" weight="1"/>
  28.                 </s:stroke>
  29.             </s:Rect>
  30.  
  31.             <!-- fill -->
  32.             <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
  33.                 <s:fill>
  34.                     <s:SolidColor id="bgFill" color="0xFFFFFF" />
  35.                 </s:fill>
  36.             </s:Rect>
  37.  
  38.             <s:Scroller left="1" top="1" right="1" bottom="1" >
  39.                 <s:DataGroup id="dataGroup"
  40.                         itemRenderer="spark.skins.default.DefaultItemRenderer">
  41.                     <s:layout>
  42.                         <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
  43.                     </s:layout>
  44.                 </s:DataGroup>
  45.             </s:Scroller>
  46.  
  47.             <s:filters>
  48.                 <s:DropShadowFilter color="0xFF0000" blurX="2" blurY="2" distance="5" angle="45" alpha="0.4" />
  49.             </s:filters>
  50.         </s:Group>
  51.     </s:PopUp>
  52.  
  53.     <s:Button id="button" left="0" right="0" top="0" bottom="0" focusEnabled="false"
  54.             skinClass="spark.skins.default.DropDownListButtonSkin" />
  55.  
  56.     <s:SimpleText id="labelElement" verticalAlign="middle"
  57.             sleft="7" right="30" top="2" bottom="2" verticalCenter="1" />
  58.  
  59. </s:SparkSkin>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: DropDownList | No Comments » | Tags: ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll