DataGrid根据数据变化动态变色

在很多实时数据更新系统如股票，我们需要在数据变化时，有闪烁效果，比如股票升了，用红色闪以下，跌了用绿色闪一下。

这里提供一个例子，是用Labe作为DataGridItemRenderer，当数据变大时用红色字体闪一下，变小时用绿色闪一下。

效果图如下，简单的用Button修改数据源。

源代码如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.validators.ValidationResult;
import mx.collections.ArrayCollection;
[Bindable]
private var dp:ArrayCollection=new
ArrayCollection([{col1:'1',col2:'2',col3:'3'},{col1:'21',col2:'22',col3:'23'},{col1:'31',col2:'32',col3:'33'}]
);
private function changeRow1():void
{
dp.getItemAt(0)['col1'] = Math.round(Math.random()*100);
dp.getItemAt(0)['col2'] = Math.round(Math.random()*100); dp.getItemAt(0)['col3'] = Math.round(Math.random()*100);
dp.refresh();
}
private function changeRow2():void
{
dp.getItemAt(1)['col1'] = Math.round(Math.random()*100); dp.getItemAt(1)['col2'] = Math.round(Math.random()*100); dp.getItemAt(1)['col3'] = Math.round(Math.random()*100);
dp.refresh();
}
private function changeRow3():void
{
dp.getItemAt(2)['col1'] = Math.round(Math.random()*100); dp.getItemAt(2)['col2'] = Math.round(Math.random()*100); dp.getItemAt(2)['col3'] = Math.round(Math.random()*100);
dp.refresh();
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%">
<mx:DataGrid dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn dataField="col1">
<mx:itemRenderer>
<mx:Component>
<mx:Label>
<mx:Script>
<![CDATA[
private var lastData:Number;
private var frameCount :Number=-1;
override public function set data(value:Object):void{
super.data = value;
if(value != null){
if(lastData < value['col1']){ //lastData是临时数据，存储老的数据frameCount =15;//控制闪烁持续时间变量
this.setStyle("color","0xFF0000");//红色
addEventListener("enterFrame", enterFrameHandler);
}else if( lastData > value['col1']){
frameCount =15;//控制闪烁持续时间变量
this.setStyle("color","0x00FF00");//绿色
addEventListener("enterFrame", enterFrameHandler);
}
lastData = value.col1;
}
}
private function enterFrameHandler(event:Event):void
{
frameCount--;
if (frameCount < 0)
{
this.setStyle("color","0x0B333C");//颜色恢复成默认颜色
removeEventListener("enterFrame", enterFrameHandler);
}
}
]]>
</mx:Script>
</mx:Label>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="col2">
<mx:itemRenderer>
<mx:Label>
<mx:Script>
<![CDATA[
private var lastData:Number;
private var frameCount :Number=-1;
override public function set data(value:Object):void{
super.data = value;
if(value != null){
if(lastData < value['col2']){ //lastData是临时数据，存储老的数据frameCount =15;//控制闪烁持续时间变量
this.setStyle("color","0xFF0000");//red addEventListener("enterFrame", enterFrameHandler);
}else if( lastData > value['col2']){
frameCount =15;//控制闪烁持续时间变量
this.setStyle("color","0x00FF00");//绿色
addEventListener("enterFrame", enterFrameHandler);
}
lastData = value.col2;
}
}
private function enterFrameHandler(event:Event):void
{
frameCount--;
if (frameCount < 0)
{
this.setStyle("color","0x0B333C");//颜色恢复成默认颜色
removeEventListener("enterFrame", enterFrameHandler);
}
}
]]>
</mx:Script>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="col3">
<mx:itemRenderer>
<mx:Component>
<mx:Label>
<mx:Script>
<![CDATA[
private var lastData:Number;
private var frameCount :Number=-1;
override public function set data(value:Object):void{
super.data = value;
if(value != null){
if(lastData < value['col3']){ //lastData是临时数据，存储老的数据 frameCount =15;//控制闪烁持续时间变量
this.setStyle("color","0xFF0000");//红色
addEventListener("enterFrame", enterFrameHandler);
}else if( lastData > value['col3']){
frameCount =15;//控制闪烁持续时间变量
this.setStyle("color","0x00FF00");//绿色
addEventListener("enterFrame", enterFrameHandler);
}
lastData = value.col3;
}
}
private function enterFrameHandler(event:Event):void
{
frameCount--;
if (frameCount < 0)
{
this.setStyle("color","0x0B333C");//颜色恢复成默认颜色
removeEventListener("enterFrame", enterFrameHandler);
}
}
]]>
</mx:Script>
</mx:Label>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:Button click="changeRow1()" label="Change Row1"/>
<mx:Button click="changeRow2()" label="Change Row2"/>
<mx:Button click="changeRow3()" label="Change Row3"/>
</mx:VBox>
</mx:Application>
在线演示
如果你要的是当数据变化是闪烁的是背景色当然也可以，只需要简单修改一下，这里我并没有对这个itemRenderer进行封装，有兴趣可以自己去封装一下。

除了Label当然还可以用其他控件，
如DataGridItemRenderer也是可以的。

应网友xwei的要求，需要改Label的背景色很简单。

用this.opaqueBackground = 0xFF0000;替换老的setStyle即可。

this.setStyle("color","0xFF0000");//红色
要去除颜色只要将this.opaqueBackground = null;就Ok了。