Flex mx:DataGrid样式调整

Flex mx:DataGrid默认状态下的效果如下：

应用样式后，效果如下：

样式代码:

<fx:Style>
  @namespace s "library://ns.adobe.com/flex/spark";
  @namespace mx "library://ns.adobe.com/flex/mx";
		
  .dataGridStyle {
     alternatingItemColors: #ffffff,#ecf7ff;	
     color: #2c82c8;
     fontFamily: Arial;
     fontSize: 14;
     textIndent:10;
     textRolloverColor:#7c7c7c;
     textSelectedColor:#7c7c7c;
     verticalGridLines: true;
     verticalGridLineColor: #eaf2f8;
     borderVisible:false;
     headerStyleName:"mydataGridHeaderStyle";
     headerSeparatorSkin:ClassReference("mx.skins.ProgrammaticSkin");
     headerBackgroundSkin:ClassReference("WidgetSkin.CustDGHeaderBackgroundSkin");
  }
		
  .mydataGridHeaderStyle {
     color: #7c7c7c;
     fontSize:15;
     fontFamily:宋体;
     textAlign:center;

  }
</fx:Style>

注：

alternatingItemColors 项目中交替出现的背景色；
verticalGridLines 是否显示垂直间隔线
headerSeparatorSkin 头部分隔线的样式,mx.skins.ProgrammaticSkin可以去掉分隔线
headerBackgroundSkin 头部背景色, Spark 主题的默认值为 mx.skins.spark.DataGridHeaderBackgroundSkin
可以自定义修改

CustDGHeaderBackgroundSkin.mxml 代码:

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         minWidth="21" minHeight="19">
    
    <fx:Script>
        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
    </fx:Script>
    
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor color="0xeceded" />
        </s:fill>
    </s:Rect>    
    
</s:SparkSkin>