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> 

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

效果如下：