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>
其中只是做了一个单一颜色填充(当然还可以实现别的效果)
效果如下:
转载于:https://blog.51cto.com/aqqle/887469