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

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

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

2.下面是一個tileList的內(nèi)置渲染器的例子。這個例子中的<fx:Script>將checkbox的狀態(tài)信息寫入了綁定的數(shù)組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.也可以將內(nèi)聯(lián) itemRenderer 用于 DataGrid。以下是應(yīng)用于列的一個示例，本例中的 <mx:Script> 塊

??? 用于覆蓋 set data 函數(shù), 使得 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> 中定義的變量僅作用于那個組件/內(nèi)聯(lián) itemRenderer。

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

?

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/tiandi/archive/2011/10/03/2198343.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。