Flex 4中如何在Spark List中显示Icon图标的例子

By Minidxer | October 24, 2009

接下来的例子演示了Flex 4中如何通过自定义数据提供源，在Spark List中显示Icon图标。



下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_List_itemRenderer_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:mx="library://ns.adobe.com/flex/halo"
  5.         xmlns:s="library://ns.adobe.com/flex/spark">
  6.  
  7.     <s:List id="list"
  8.             labelField="label"
  9.             itemRenderer="skins.CustomIconItemRenderer"
  10.             horizontalCenter="0"
  11.             verticalCenter="0">
  12.         <s:dataProvider>
  13.             <s:ArrayList>
  14.                 <fx:Object label="red" ico="@Embed('assets/bullet_red.png')" />
  15.                 <fx:Object label="orange" ico="@Embed('assets/bullet_orange.png')" />
  16.                 <fx:Object label="yellow" ico="@Embed('assets/bullet_yellow.png')" />
  17.                 <fx:Object label="green" ico="@Embed('assets/bullet_green.png')" />
  18.                 <fx:Object label="blue" ico="@Embed('assets/bullet_blue.png')" />
  19.             </s:ArrayList>
  20.         </s:dataProvider>
  21.     </s:List>
  22.  
  23. </s:Application>

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:ItemRenderer name="CustomIconItemRenderer"
  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}" weight="1"/>
  28.         </s:stroke.normalAndShowsCaret>
  29.         <s:stroke.hoveredAndShowsCaret>
  30.             <s:SolidColorStroke color="{selectionColor}" weight="1"/>
  31.         </s:stroke.hoveredAndShowsCaret>
  32.         <s:stroke.selectedAndShowsCaret>
  33.             <s:SolidColorStroke color="{selectionColor}" weight="1"/>
  34.         </s:stroke.selectedAndShowsCaret>
  35.         <s:fill>
  36.             <s:SolidColor color.normal="{contentBackgroundColor}"
  37.                     color.normalAndShowsCaret="{contentBackgroundColor}"
  38.                     color.hovered="{rollOverColor}"   
  39.                     color.hoveredAndShowsCaret="{rollOverColor}"
  40.                     color.selected="{selectionColor}"
  41.                     color.selectedAndShowsCaret="{selectionColor}" />
  42.         </s:fill>
  43.     </s:Rect>
  44.  
  45.     <s:BitmapImage id="icon"
  46.             source="{data.ico}"
  47.             verticalCenter="0"
  48.             left="3" />
  49.     <s:SimpleText id="labelDisplay"
  50.             verticalCenter="0"
  51.             left="23" right="3" top="6" bottom="4"/>
  52.  
  53. </s:ItemRenderer>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Gumbo, List | No Comments » |

Random Posts

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll