如何更新 Spark DataGrid 中标题部分的外观？这是一个如何设置 Spark DataGrid 的标题背景颜色、标题文本颜色、列分隔符和排序箭头指示器符号颜色的社区 wiki 帖子。
问问题
6197 次
1 回答
4
我在网上找到了一些关于如何设置 Spark DataGrid 标头样式的示例，但不是按照我所描述的方式。所以这就是我的做法。
MXML：
<s:DataGrid />
CSS：
s|DataGrid {
symbolColor:#FF0000; /* defines the sort indicator color */
}
s|GridItemRenderer {
color:#0000FF; /* defines the header text color */
chromeColor:#00FF00; /* defines the header background color */
}
就是这样。嗯，不完全是。GridItemRenderer 使用渐变。如果您不想要这些，除了上述之外，您还必须做一些额外的工作。
第 II 部分
要删除渐变，我们必须创建两个新的皮肤类。基于 spark.skins.spark.DataGridSkin 的新数据网格皮肤和基于 spark.skins.spark.DefaultGridHeaderRenderer 的新数据网格标题皮肤。第一个皮肤扩展了 DataGridSkin。第二个皮肤是 DefaultGridHeaderRenderer 的副本。
MXML：
<s:DataGrid skinClass="view.skins.AbstractDataGridSkin"/>
抽象数据网格皮肤：
<?xml version="1.0" encoding="utf-8"?>
<spark:DataGridSkin
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:fb="http://ns.adobe.com/flashbuilder/2009"
xmlns:spark="spark.skins.spark.*"
xmlns:skins="view.skins.*"
>
<fx:Declarations>
<fx:Component id="headerRenderer">
<skins:AbstractDataGridHeaderSkin />
</fx:Component>
<!--- Change the look of the column separator -->
<fx:Component id="columnSeparator">
<s:Line>
<s:stroke>
<s:SolidColorStroke color="0xA6A6A6" weight="1" caps="square"/>
</s:stroke>
</s:Line>
</fx:Component>
<!--- Defines the look of the header column separator -->
<fx:Component id="headerColumnSeparator">
<s:Line>
<s:stroke>
<s:SolidColorStroke color="0x00FF00" weight="1" caps="square" />
</s:stroke>
</s:Line>
</fx:Component>
</fx:Declarations>
</spark:DataGridSkin>
此类指向新的 DataGridHeaderSkin。
AbstractDataGridHeaderSkin：
DefaultGridHeaderRenderer 中有很多代码我不想粘贴到这个示例中，所以我只展示更改的内容。
首先删除除“第 2 层填充”之外的所有 Rect 层。接下来，将“第 2 层填充”更新为纯色填充，如下所示：
<s:GridItemRenderer minWidth="21" minHeight="21"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<!-- ...original code here.. -->
<!-- layer 2: fill -->
<!--- @private -->
<!--- Set left and right to -1 to fill out header width
<s:Rect id="fill" left="0" right="0" top="0" bottom="-1"> -->
<s:Rect id="fill" left="-1" right="-1" top="0" bottom="0">
<s:fill>
<s:SolidColor color="0xFFFFFF" color.hovered="0xBBBDBD" color.down="0xAAAAAA" alpha="1" >
</s:SolidColor>
</s:fill>
</s:Rect>
<!-- ...original code here.. -->
</s:GridItemRenderer>
我们还必须更新 sortIndicatorArrow 以从那里删除梯度。
<fx:Component id="defaultSortIndicator">
<s:Path data="M 3.5 7.0 L 0.0 0.0 L 7.0 0.0 L 3.5 7.0" implements="spark.components.gridClasses.IGridVisualElement">
<fx:Script>
<![CDATA[
import spark.components.DataGrid;
import spark.components.Grid;
/**
* @private
*/
public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
{
const dataGrid:DataGrid = grid.dataGrid;
if (!dataGrid)
return;
const color:uint = dataGrid.getStyle("symbolColor");
arrowFill.color = color;
}
]]>
</fx:Script>
<s:fill>
<s:SolidColor id="arrowFill" color="0" />
</s:fill>
</s:Path>
</fx:Component>
就是这样。
注意：如果您使用镀铬颜色，它会转换标题填充背景。您可以将填充添加到排除项（更新 updateDisplayList 方法），也可以像这样设置填充 alpha 值。
<!-- layer 2: fill -->
<!--- @private -->
<!--- Set left and right to -1 to fill out header width
<s:Rect id="fill" left="0" right="0" top="0" bottom="-1"> -->
<s:Rect id="fill" left="-1" right="-1" top="0" bottom="0">
<s:fill>
<s:SolidColor alpha="1"
alpha.hovered=".95"
alpha.down="1"/>
</s:fill>
</s:Rect>
or add this to updateDisplayList and set the colors on the fill (chromeColor would not need to be set then)
var exclusions:Array = [fill, labelDisplay, sortIndicatorInstance];
在某些时候，这些常见的样式有望在 Spark DataGrid 上可用。Spark 可以更灵活地定义组件的外观和感觉，这很好，但随后将样式值硬编码到 Flex SDK 附带的默认皮肤类中。现在由开发人员来查找和修改这些并不总是那么容易。
要删除垂直列线或任何其他非必需的皮肤部件，请在初始化事件中将部件的属性设置为 null，如下所示：
抽象数据网格皮肤：
<?xml version="1.0" encoding="utf-8"?>
<spark:DataGridSkin
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:fb="http://ns.adobe.com/flashbuilder/2009"
xmlns:spark="spark.skins.spark.*"
xmlns:skins="view.skins.*"
initialize="caretIndicator = null;columnSeparator=null"
/>
要设置标题的高度，请将其设置在 headerComponent 属性上：
<fx:Component id="headerRenderer">
<skins:AbstractDataGridHeaderSkin height="36" />
</fx:Component>
资料来源： http ://ramblingdeveloper.com/ramblings/2011/9/25/skinning-a-flex-spark-datagrid-header.html
于 2013-03-20T18:38:10.620 回答