Flex 4中如何在List内显示不同字体的例子

By Minidxer | November 16, 2009

接下来的例子演示了Flex 4中如何通过自定义数据源，在ComboBox的下拉菜单List内显示不同字体。



下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  3.                xmlns:s="library://ns.adobe.com/flex/spark"
  4.                xmlns:mx="library://ns.adobe.com/flex/halo"
  5.                initialize="init();">
  6.  
  7.     <fx:Script>
  8.         <![CDATA[
  9.             private function init():void {
  10.                 var fontArr:Array = Font.enumerateFonts(true); /* device fonts only */
  11.                 arrList = new ArrayList(fontArr.sortOn("fontName"));
  12.             }
  13.         ]]>
  14.     </fx:Script>
  15.  
  16.     <fx:Declarations>
  17.         <s:ArrayList id="arrList" />
  18.     </fx:Declarations>
  19.  
  20.     <s:List id="fontList"
  21.             dataProvider="{arrList}"
  22.             labelField="fontName"
  23.             itemRenderer="skins.CustomFontItemRenderer"
  24.             fontSize="24"
  25.             useVirtualLayout="true"
  26.             width="200" height="200"
  27.             horizontalCenter="0" verticalCenter="0" />
  28.  
  29. </s:Application>

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:ItemRenderer name="CustomFontItemRenderer"
  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:Graphic toolTip="{data.fontName}" width="100%" height="100%">
  46.         <s:SimpleText id="labelDisplay"
  47.                 fontFamily="{data.fontName}"
  48.                 verticalCenter="0"
  49.                 left="3" right="3" top="6" bottom="4"/>
  50.     </s:Graphic>
  51.  
  52. </s:ItemRenderer>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: ComboBox, Gumbo, List | 1 Comment » | 1,139 views Tags: , ,

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

One comment | Add One

  1. 卢松松 - 11/17/2009 at 1:18 pm

    不错 学习了

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll