在學習Flex的過程中，你可能會遇到Flex渲染器的概念，這里和大家分享一下Flex渲染器的使用，在Flex要顯示特定的格式完全可以通過Flex渲染器來自定義。

Flex中使用渲染器(ItemRenderer)

Flex渲染器使用非常頻繁，可以讓用戶自行定義數據的顯示格式，做過.NET開發的朋友我想都知道數據控件中的ItemTemplate，我個人認為Flex中的Flex渲染器和.NET中的ItemTemplate從功能上來說相差不大，在Flex要顯示特定的格式完全可以通過Flex渲染器來自定義。

在《使用TileList+TitleWindowt組件開發聊天表情功能》這文章里其實就已經用到了Flex渲染器，只是沒有專們提出來介紹，這里使用的是內部ItemRenderer，除此之外我們還可以使用外部ItemRenderer。故名思意內部ItemRenderer就是直接嵌套在Flex內部的，外部Flex渲染器則是將要顯示的效果通過外部組件或是外部類來進行定義開發。

<mx:TileListxmx:TileListx="0"y="0"width="100%"height="100%"id="faceList" 
dataProvider="{faceArray}"itemClick="onItemClick(event)"> 
<mx:itemRenderer> 
<mx:Component> 
<mx:Imagesourcemx:Imagesource="{data.ImageUrl}"/> 
</mx:Component> 
</mx:itemRenderer> 
</mx:TileList> 
 

 如上則是使用的內部ItemRenderer，通過<mx:itemRenderer>和<mx:Component>在Flex組件的內部定義項目渲染器（ItemRenderer）。如果想使用外部Flex渲染器的方式實現呢，則需要定義一個外部Flex渲染器,將Renderer的格式在自定義的類或組件中去實現，如下：

package  
{  
importmx.core.UIComponent;  
 
publicclassFaceRendererextendsUIComponent  
{  
privatevarimageUrl:Image;  
 
publicfunctionFaceRenderer()  
{  
super();  
}  
 
protectedoverridefunctioncreateChildren():void  
{  
imageUrl=newImage();  
}  
 
protectedoverridefunctioncommitProperties():void  
{  
super.commitProperties();  
imageUrl.source=data.ImageUrl;  
}  
}  
}  
 

 在Flex組件中通過Flex渲染器屬性引用自定義的外部渲染器就OK了，最終效果就是《使用TileList+TitleWindowt組件開發聊天表情功能》這文章里的效果。

<mx:TileListxmx:TileListx="0"y="0"width="100%"height="100%"id="faceList" 
dataProvider="{faceArray}" 
itemClick="onItemClick(event)" 
itemRenderer="FaceRenderer"> 
</mx:TileList> 

【編輯推薦】

1. 解析Flex組件中Label組件的用法
2. Flex主題創建及支持的樣式設置方式
3. 全面認識Flex應用程序的六大元素
4. 揭開Flex正則表達式的神秘面紗
5. Flex數據綁定及其使用頻繁的幾種情況