Flex Gumbo中如何通过itemRenderer属性创建翻转渐进颜色List的例子

By Minidxer | August 22, 2009

接下来的例子演示了Flex Gumbo中如何通过itemRenderer属性，创建翻转渐进颜色List。

让我们先来看一下Demo（可以点击这里察看源代码）：


下面是完整代码(或点击这里察看)：
下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_List_itemRenderer_rollOverColor_LinearGradient_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.  
  7.     <mx:ApplicationControlBar width="100%" cornerRadius="0">
  8.         <mx:Form styleName="plain">
  9.             <mx:FormItem label="rollOverColor:">
  10.                 <mx:ColorPicker id="colorPicker1" selectedColor="red" />
  11.             </mx:FormItem>
  12.             <mx:FormItem label="contentBackgroundColor:">
  13.                 <mx:ColorPicker id="colorPicker2" selectedColor="purple" />
  14.             </mx:FormItem>
  15.         </mx:Form>
  16.     </mx:ApplicationControlBar>
  17.  
  18.     <s:List id="list"
  19.             itemRenderer="skins.CustomDefaultItemRenderer"
  20.             rollOverColor="{colorPicker1.selectedColor}"
  21.             contentBackgroundColor="{colorPicker2.selectedColor}"
  22.             horizontalCenter="0"
  23.             verticalCenter="0">
  24.         <s:dataProvider>
  25.             <s:ArrayList source="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" />
  26.         </s:dataProvider>
  27.     </s:List>
  28.  
  29. </s:Application>

下面是skins/CustomDefaultItemRenderer.mxml代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:ItemRenderer name="CustomDefaultItemRenderer"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         focusEnabled="false">
  6.     <!-- states -->
  7.     <s:states>
  8.         <s:State name="normal" />
  9.         <s:State name="hovered" />
  10.         <s:State name="selected" />
  11.         <s:State name="normalAndShowsCaret"/>
  12.         <s:State name="hoveredAndShowsCaret"/>
  13.         <s:State name="selectedAndShowsCaret"/>
  14.     </s:states>
  15.  
  16.     <fx:Script>
  17.         <![CDATA[
  18.             override public function set label(value:String):void {
  19.                 super.label = value;
  20.                 labelDisplay.text = label;
  21.             }
  22.         ]]>
  23.     </fx:Script>
  24.  
  25.     <s:Rect left="0" right="0" top="0" bottom="0">
  26.         <s:stroke.normalAndShowsCaret>
  27.             <s:SolidColorStroke color="{selectionColor}"
  28.                     weight="1"/>
  29.         </s:stroke.normalAndShowsCaret>
  30.         <s:stroke.hoveredAndShowsCaret>
  31.             <s:SolidColorStroke color="{selectionColor}"
  32.                     weight="1"/>
  33.         </s:stroke.hoveredAndShowsCaret>
  34.         <s:stroke.selectedAndShowsCaret>
  35.             <s:SolidColorStroke color="{selectionColor}"
  36.                     weight="1"/>
  37.         </s:stroke.selectedAndShowsCaret>
  38.         <s:fill>
  39.             <s:SolidColor color.normal="{contentBackgroundColor}"
  40.                     color.normalAndShowsCaret="{contentBackgroundColor}"
  41.                     color.hoveredAndShowsCaret="{rollOverColor}"
  42.                     color.selected="{selectionColor}"
  43.                     color.selectedAndShowsCaret="{selectionColor}" />
  44.         </s:fill>
  45.         <s:fill.hovered>
  46.             <s:LinearGradient>
  47.                 <s:GradientEntry color="{rollOverColor}" />
  48.                 <s:GradientEntry color="{contentBackgroundColor}" />
  49.             </s:LinearGradient>
  50.         </s:fill.hovered>
  51.     </s:Rect>
  52.  
  53.     <s:SimpleText id="labelDisplay"
  54.             verticalCenter="0"
  55.             left="3" right="3" top="6" bottom="4" />
  56.  
  57. </s:ItemRenderer>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Gumbo, List | No Comments » | Tags: , , ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll