2

如何更新 Spark DataGrid 中标题部分的外观？这是一个如何设置 Spark DataGrid 的标题背景颜色、标题文本颜色、列分隔符和排序箭头指示器符号颜色的社区 wiki 帖子。

4

1 回答 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 回答