flex学习笔记 datagrid（二）

datagrid还有一部分就是就是标题栏，标题栏的样式可以通过皮肤来控制，如下所示：

 
 

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

<s:Application?xmlns:fx="http://ns.adobe.com/mxml/2009"? ?

  
  

???????????????xmlns:s="library://ns.adobe.com/flex/spark"? ?

  
  

???????????????xmlns:mx="library://ns.adobe.com/flex/mx"?>?

  
  

????<fx:Declarations>?

  
  

????????<!--?将非可视元素（例如服务、值对象）放在此处?-->?

  
  

????</fx:Declarations>?

  
  

????<mx:VBox??width="100%"?height="100%"?horizontalAlign="center"?verticalAlign="middle">?

  
  

????????<mx:DataGrid??horizontalGridLines="true"?horizontalGridLineColor="#CCCCCC"?verticalGridLineColor="#CCCCCC"?height="125"?

  
  

??????????????????????alternatingItemColors="#FFFFFF"??borderColor="#CCCCCC"?headerBackgroundSkin="skins.headerBackSkin">?

  
  

????????????<mx:columns>?

  
  

????????????????<mx:DataGridColumn?dataField="123"?/>?

  
  

????????????????<mx:DataGridColumn?dataField="234"/>?

  
  

????????????????<mx:DataGridColumn?dataField="345"/>?

  
  

????????????????<mx:DataGridColumn?dataField="456"/>?

  
  

????????????????<mx:DataGridColumn?dataField="567"/>?

  
  

????????????????<mx:DataGridColumn?dataField="678"/>?

  
  

????????????</mx:columns>?

  
  

????????</mx:DataGrid>?

  
  

????</mx:VBox>?

  
  

</s:Application>?

 
 

通过headerBackgroundSkin属性来设置标题的样式

皮肤文件如下：

 
 

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

<spark:DataGridHeaderBackgroundSkin?xmlns:fx="http://ns.adobe.com/mxml/2009"? ?

  
  

????????????????????????????????????xmlns:s="library://ns.adobe.com/flex/spark"? ?

  
  

????????????????????????????????????xmlns:mx="library://ns.adobe.com/flex/mx"? ?

  
  

????????????????????????????????????xmlns:spark="mx.skins.spark.*"?width="400"?height="300">?

  
  

????<fx:Declarations>?

  
  

????????<!--?将非可视元素（例如服务、值对象）放在此处?-->?

  
  

????</fx:Declarations>?

  
  

????<s:Rect?left="0"?right="0"?top="0"?bottom="0">?

  
  

????????<s:fill>?

  
  

????????????<s:LinearGradient?rotation="90">?

  
  

????????????????<s:GradientEntry?color="0x1b8bf4"?alpha="1.0"/>?

  
  

????????????</s:LinearGradient>?

  
  

????????</s:fill>?

  
  

????</s:Rect>?

  
  

</spark:DataGridHeaderBackgroundSkin>?

 
 

其中只是做了一个单一颜色填充（当然还可以实现别的效果）

效果如下：