itemRenderer 最擅長與應用程序的用戶通信。有時通信很簡單, 只是顯示一個名稱；有時會使用更精緻的顏色；有時具有交互性。
狀態
Flex <mx:State> 是更改 itemRenderer 外觀的一個理想方法。狀態使用簡便, 並且與過渡結合使用時, 可以爲用戶提供反饋和愉悅的體驗。
Flex <mx:State> 是更改 itemRenderer 外觀的一個理想方法。狀態使用簡便, 並且與過渡結合使用時, 可以爲用戶提供反饋和愉悅的體驗。
在本例中, 您將爲列表新建一個 MXML itemRenderer（記住, 如果您願意, 完全可以使用 ActionScript 這樣做）。這個 itemRenderer 顯示圖像、書名、作者、價格以及用於購買這本書籍的 Button。
但是, 您想要實現的是, 如果書籍售空（數據包含 <instock> 節點, 它們是 yes 或 no）, 價格和“購買”Button 會消失。我爲價格和 Button 的 HBox 父代增加了一個 id 屬性, 使此處的編碼更簡單一些。這樣, 我可以通過更改 HBox 和 priceBox 的可視性來更改那些項目的可視性。
通過覆蓋 set data 函數可以這樣做, 您將會這麼做, 但不是直接更改 priceBox 的可視性, 而是使用以下狀態定義:
將以下內容放在根 <mx:HBox> 標記下。
這個示例有些牽強, 因爲它過於複雜, 不適合執行簡單任務, 但它說明了如何使用狀態。有兩種狀態:
基本狀態: 這是組件的正常狀態。不使用狀態的組件處於基本狀態。在本例中, 基本狀態的 priceBox visible 屬性爲 true（默認）。這是當 instock 爲 yes 時的情況。
NoStockState: 這是當 instock 的值爲 no 時的狀態。處於這個狀態時, 會執行 SetProperty 指令。target 屬性決定了哪個類成員有問題, name 屬性是目標上待更改屬性的名稱, value 是該屬性的新值。
set data 函數通過查看 instock 的值決定要使用哪個狀態:
currentState 是所有 UIComponent 控制的屬性。它決定了哪個狀態是活動狀態。在狀態之間切換時, Flex 框架從基本狀態開始, 然後應用給定狀態的規則。
注意: 請記住 itemRenderer 是循環使用的, 所以您必須始終恢復值；不要在 itemRenderer 中保留 if 而沒有 else。
如果您感覺風險較打, 可以刪除本例中的 set data 覆蓋。使用數據綁定表達式在根標記中直接設置 currentState:
<mx:HBox xmlns:mx="/2006/mxml" width="400" currentState="{data.instock == 'yes' ? '' : 'NoStockState'}" >
通過檢查與根標記內聯的 data.instock 來設置 currentState 的值－不錯的伎倆, 但是可能較難維護。
添加元素
在這個 itemRenderer 中, 僅當 instack 值爲 yes時才顯示價格和“購買”按鈕。當然不使用狀態也可以這樣做, 但是, 如果 itemRenderer 要添加或刪除更多控制, 狀態更適合, 因爲可以通過設置 itemRenderer 的 currentState 屬性對控制外觀輕鬆實現控制。
您使用狀態添加一個標籤, 告訴用戶該商品已售空, 而不是簡單地刪除價格和 Button。以下是修改後的狀態:
<mx:AddChild> 標記指明將 Label 添加到 priceBox 中。除了將 priceBox 的 visible 屬性設置爲 false, 再使用一條友好的消息替換它。
再次, 您可以將這個標籤添加到 set data 函數中－或按原樣添加它, 只需將它的可視性設置爲 false 並在 set data 函數中將它更改爲 true。但我認爲您可以看到狀態的值: 如果 instock 變爲 no 條件的要求變得更復雜, 您只需調整 NoStockState；切換狀態的 ActionScript 代碼保持不變。
注意: 可以在 Flex Builder 的“設計”視圖中修改狀態。
擴展列表項目
本例不太適合 List 控制, 但十分適合 VBox 和 Repeater。當必須滾動列表時, 這個擴展適當位置項目的問題變得有些冒險。想象一下: 列表中的項目高度相同。現在擴展項目 2 的高度。目前進展順利: 項目 2 比其他可見項目高。關鍵在這裏: visible 項目。現在滾動列表。記住 itemRenderer 是循環使用的。所以當項目 2 滾出視圖時, 它的 itemRenderer 將移到列表底部。必須重置它的高度。沒問題, 這個相當簡單。現在滾動列表, 使項目 2 重新回到視圖中。它應該是擴展後的高度。itemRenderer 怎麼知道要這樣做? 通過之前的文章, 您知道信息來自數據本身或某些外部源。
我認爲調整大小的 itemRenderer 太複雜, 並不值得這樣做。我相信使用 VBox 和 Repeater 能以更好的方式做到這一點。但是, Repeater 的關鍵在於將創建每個子代。如果您有 1000 個記錄並使用 Repeater, 您會獲得 itemRenderer 的 1000 個實例。
對於本例, 您依然編寫一個 itemRenderer, 但將它用作 VBox 的子代。列表元素看上去相當簡單: 一本書籍的名稱及其作者。但是單擊 itemRenderer, 它會擴展到位。我們使用兩種戰術做到這一點:
itemRenderer 有一種包含附加信息的狀態。
itemRenderer 使用一種 Resize 過渡, 爲 itemRenderer 提供更平滑的擴展和收縮。
itemRenderer 的基本狀態相當簡單:
ExpandedState 添加其他元素, 它們用於 itemRenderer 的高度:
使用 itemRenderer 更改大小就像添加過渡一樣簡單:
將它放在 <mx:states> 標記下。
每當狀態更改時應用過渡, 因爲狀態的 fromState 和 toState 屬性是通配符。現在您只需添加用於單擊 itemRenderer（將一個 click 事件添加到根標記）的事件處理函數並更改狀態:
<mx:Script>
後續工作
狀態是對 itemRenderer 的可視外觀進行大量修改的好方法。您可以將多個更改歸入一個 State, 然後設置 itemRenderer 的 currentState 屬性就可以全部完成。