Question

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

Answer 1

我在网上找到了一些关于如何设置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使用渐变。如果您不想要那些除了上述之外还需要做一些额外的工作。

第二部分
要删除渐变，我们必须创建两个新的皮肤类。基于spark.skins.spark.DataGridSkin的新数据网格外观和基于spark.skins.spark.DefaultGridHeaderRenderer的新数据网格头外观。第一个皮肤扩展DataGridSkin。第二个皮肤是DefaultGridHeaderRenderer的副本。

MXML ：

<s:DataGrid skinClass="view.skins.AbstractDataGridSkin"/>

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中有很多代码我不想粘贴到这个示例中，因此我只会显示更改内容。

首先删除除＆＃34;第2层填充＆＃34;之外的所有Rect图层。接下来，更新＆＃34;第2层填充＆＃34;到如下所示的纯色填充：

<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，如下所示：

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.*"
    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

如何设置Spark DataGrid的标题样式

1 个答案: