5.3.為List的內容變更添加特效

2024-04-27 13:51:56

字體：大中小

來源：轉載

供稿：網友

5.3.1 問題
當list 的數據被改變的時候為list 添加顯示效果
5.3.2 解決方法
創建一個效果序列并將它們傳遞給List 組件的itemsChangeEffect 屬性
5.3.3 討論
數據改變時效果是flex 3 新增的很強大的效果,對于之前的版本，你可以寫數據改變時效果并分發和注冊事件和事件偵聽，但是伴隨著flex 3 新增itemsChangeEffect 屬性，List 組件和任何繼承ListBase 的類都可以在它的dataProvider 改變時分發事件,然后該事件觸發所有傳遞給List 中新的itemsChangeEffect 屬性的效果或效果序列.

由于dataChange 事件是由List 的dataProvider 觸發的，設置一個類似List 組件的dataProvider 的數組意味著該數組被改變時itemsChangeEffect 事件不會被分發。記住，事件被改變時不分發事件，對于ArrayCollection 類，當事件被改變時仍然會分發事件，類似繼承自EventDispatcher 并設置成分發事件一樣，當一個設置方法被調用來改變潛在的數組對象的值簡單地將itemsChangeEffect 設置為一個2 秒淡出的DefaultListEffect 的實例，下面這個例子是當List 被改變時應用一個mx.effects.Glow 實例的效果:

-XML

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="900" top="20" left="20">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
//note that for this example to work, the dataprovider
//must be an array collection
[Bindable]
private var dp:ArrayCollection = new ArrayCollection([{name:"John Smith" ,position:"developer" }
, {name:"Ellen Smith" , position:"manager" }
, {name:"James Smith" , position:"accountant" }
, {name:"Jane Smith" , position:"designer" }]);
private function addItem():void {
dp.addItem({name:"Jim Smith" , position:"Janitor" });
}

]]>
</mx:Script>
<mx:DefaultListEffect color="0xccccff" fadeOutDuration="2000"
id="glow"/>
<mx:List width="300" itemsChangeEffect="{glow}"
dataProvider="{dp}" editable="true" labelField="name"/>
<mx:Button click="addItem()" label="add item"/>
<mx:List width="300" itemsChangeEffect="{glow}"
dataProvider="{dp}" editable="true" labelField="name"/>
</mx:VBox>