1.需要理解的概念。? 要理解 itemRenderer, 您必須理解它們為何變成現在這樣以及我們當初設計它們時的目的。在此, 當我用到“我們”時, 我指的是 Adobe Flex 設計小組。我與它沒有關系。言歸正傳, 假設您要顯示 1,000 條記錄。如果您認為列表控制會創建 1,000 個 itemRenderer, 您就錯了。如果列表只顯示 10 行, 它會創建約 12 個 itemRenderer－這些足以顯示各個可見行, 多出的幾個則用于緩沖和性能。列表最初顯示行 1–10。當用戶滾動這個列表時, 它現在可能顯示行 3-12。但那 12 個 itemRenderer 仍在那里: 及時滾動列表后, 也不會新建任何 itemRenderer。

以下是 Flex 執行的操作。滾動列表時, 那些依然顯示相同數據 (行 3-10) 的 itemRenderer 將向上移動。它們并未發生任何變化, 只是移到了新位置。之前顯示行 1 和 行 2 數據的 itemRenderer 現在移到行 10 的 itemRendere 下。然后, 為那些 itemRenderer 提供行 11 和 行 12 的數據。換言之, 除非您調整列表大小, 否則將重用/循環使用那些相同的 itemRenderer－它們只是移到新位置并且現在顯示新數據

內聯 itemRenderer 直接寫入 MXML 文件中列表控制出現的位置。內聯 itemRenderer 最簡單, 一般用于十分簡單的渲染器或用于為較大的應用程序構建原型。內聯 itemRenderer 本身并沒有問題, 但隨著代碼變得復雜, 最好將它提取到自己的類中.

2.下面是一個tileList的內置渲染器的例子。這個例子中的<fx:Script>將checkbox的狀態信息寫入了綁定的數組fields，用于后面獲取信息。

<mx:TileList id="tilelist_field"
columnWidth="100"
dataProvider="{fields}"
borderVisible="false"
height="{hGroup_middle.height-25}"
width="100%">
<mx:itemRenderer>
<fx:Component>
<mx:HBox horizontalAlign="left"
horizontalScrollPolicy="off">
<fx:Script>
<![CDATA[
protected function checkbox1_clickHandler(event:MouseEvent):void
{
data.selected=(event.target as CheckBox).selected;
}
]]>
</fx:Script>

<mx:CheckBox height="18"
label="{data.name}"
click="checkbox1_clickHandler(event)"
selected="{data.selected}"
toolTip="{data.name}"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:TileList>

?

3.也可以將內聯 itemRenderer 用于 DataGrid。以下是應用于列的一個示例，本例中的 <mx:Script> 塊

??? 用于覆蓋 set data 函數, 使得 itemRenderer 的背景色可以更改。

?

<mx:DataGrid x="29" y="303" width="694" height="190" dataProvider="{testData.book}" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn headerText="Pub Date" dataField="date" width="85" />
<mx:DataGridColumn headerText="Author" dataField="author" width="125"/>
<mx:DataGridColumn headerText="Title" dataField="title">
<mx:itemRenderer>
<mx:Component>
<mx:HBox paddingLeft="2">
<mx:Script>
<![CDATA[
override public function set data( value:Object ) : void {
super.data = value;
var today:Number = (new Date()).time;
var pubDate:Number = Date.parse(data.date);
if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
else setStyle("backgroundColor",0xffffff);
}
]]>
</mx:Script>
<mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
<mx:Text width="100%" text="{data.title}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

?

4.<mx:Component> 被視為外部定義類。

? 從 <mx:Component> 中定義的變量僅作用于那個組件/內聯 itemRenderer。

? 同樣, <mx:Component> 外的內容在不同的作用范圍內, 就像這個組件是在另一個文件中定義的那樣。
? outerDocument 標識符將作用范圍更改為查找文件或外部文檔, 并引用 <mx:Component>

?

本文摘自：http://www.adobe.com/cn/devnet/flex/articles/itemrenderers_pt1.html

?

轉載于:https://www.cnblogs.com/tiandi/archive/2011/10/03/2198343.html

總結

以上是生活随笔為你收集整理的Flex itemRenderer 内联渲染器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。