DataGrid据数据变化动态变色

在很多实时数据更新系统如股票，我们需要在数据变化时，有闪烁效果，比如股票升了，用红色闪以下，跌了用绿色闪一下。这里提供一个例子，是用Labe作为DataGridItemRenderer，当数据变大时用红色字体闪一下，变小时用绿色闪一下。效果图如下，简单的用Button修改数据源。

源代码如下：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

   <mx:Script>

   <![CDATA[

   import mx.controls.Alert;

   import mx.validators.ValidationResult;

   import mx.collections.ArrayCollection;

   [Bindable]

   privatevar dp:ArrayCollection=new ArrayCollection([{col1:'1',col2:'2',col3:'3'},{col1:'21',col2:'22',col3:'23'},{col1:'31',col2:'32',col3:'33'}]

                  );

   privatefunction 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();

   }

   privatefunction 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();

    }

   privatefunction 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[

                         privatevar lastData:Number;

                         privatevar frameCount :Number=-1;

                         overridepublicfunctionset data(value:Object):void{

                             super.data = value;

                             if(value != null){

                             if(lastData < value['col1']){ //lastData是临时数据，存储老的数据

                             frameCount =15;//控制闪烁持续时间变量

                                 this.setStyle("color","0xFF0000");//红色        

                                 addEventListener("enterFrame", enterFrameHandler);

                             }elseif( lastData > value['col1']){

                                 frameCount =15;//控制闪烁持续时间变量

                                 this.setStyle("color","0x00FF00");//绿色

                                 addEventListener("enterFrame", enterFrameHandler);

                             }                                                    

                             lastData = value.col1;

                             }

                         }

                         privatefunction 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:Component>

                        <mx:Label>

                           <mx:Script> 

                           <![CDATA[

                           privatevar lastData:Number;

                           privatevar frameCount :Number=-1;

                           overridepublicfunctionset 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);

                                  }elseif( lastData > value['col2']){

                                      frameCount =15;//控制闪烁持续时间变量

                                      this.setStyle("color","0x00FF00");//绿色

                                      addEventListener("enterFrame", enterFrameHandler);

                                   }                                                    

                                   lastData = value.col2;

                                }

                           }

                           privatefunction 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="col3">

                  <mx:itemRenderer>

                              <mx:Component>

                                    <mx:Label>

                                           <mx:Script> 

                                          <![CDATA[

                                          privatevar lastData:Number;

                                          privatevar frameCount :Number=-1;

                                          overridepublicfunctionset data(value:Object):void{

                                                super.data = value;

                                                  if(value != null){

                                                      if(lastData < value['col3']){ //lastData是临时数据，存储老的数据

                                                          frameCount =15;//控制闪烁持续时间变量

                                                          this.setStyle("color","0xFF0000");//红色        

                                                              addEventListener("enterFrame", enterFrameHandler);

                                                      }elseif( lastData > value['col3']){

                                                          frameCount =15;//控制闪烁持续时间变量

                                                          this.setStyle("color","0x00FF00");//绿色

                                                          addEventListener("enterFrame", enterFrameHandler);

                                                      }                                                    

                                                      lastData = value.col3;

                                                  }

                                                }

                                                privatefunction 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");//红色         

 

转载于：http://wmcai.blog.163.com/blog/static/48024200801424639644/

要去除颜色只要将this.opaqueBackground = null;就Ok了