由网友(繁華落幕誰演繹悲傷)分享简介：我已经设置行的数据网格之间的水平网格线为true。但我无法增加其厚度。怎么办呢？i have set horizontal gridlines between rows of a datagrid to true. But i'm unable to increase its thickness. how to do...

我已经设置行的数据网格之间的水平网格线为true。但我无法增加其厚度。怎么办呢？

i have set horizontal gridlines between rows of a datagrid to true. But i'm unable to increase its thickness. how to do it?

推荐答案

有你可以去解决这两种方式。如果您检查文档，DataGrid中有一个 horizo​​ntalSeparatorSkin 风格。该文档指出，这是通过默认未定义，并且在这种情况下，网格使用它的 drawHorizo​​ntalLine（）方法绘制的线条。

There are two ways you can go about solving this. If you check the docs, DataGrid has a horizontalSeparatorSkin style. The docs state that this is undefined by default, and in which case the grid uses it's drawHorizontalLine() method to draw the lines.

所以，你可以设置 horizo​​ntalSeparatorSkin 风格，你自己的类，扩展 ProgramaticSkin 或延长的DataGrid 类和重写 drawHorizo​​ntalLine（）方法。两者都是很容易做到，这里的每一个的示例应用程序：

So you can either set the horizontalSeparatorSkin style to your own class that extends ProgramaticSkin or extend the DataGrid class and override the drawHorizontalLine() method. Both are fairly easy to do, here's app with an example of each one:

应用

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*"
                layout="vertical"
                creationComplete="onCreationComplete()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            protected function onCreationComplete():void
            {
                var dp:ArrayCollection= new ArrayCollection([ { label: "one", value: 1 }, { label: "two", value: 2 }, { label: "three", value: 3 } ]);
                grid.dataProvider=dp;
                customGrid.dataProvider=dp;
            }

        ]]>
    </mx:Script>

    <mx:DataGrid id="grid" horizontalGridLines="true" horizontalSeparatorSkin="{HorizontalSeparatorSkin}">
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="value"/>
        </mx:columns>
    </mx:DataGrid>

    <local:CustomGrid id="customGrid" horizontalGridLines="true" horizontalGridLineColor="#FF0000">
        <local:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="value"/>
        </local:columns>
    </local:CustomGrid>
</mx:Application>

中编程的皮肤（ Horizo​​ntalSeparatorSkin.as ）：

package
{
    import flash.display.Graphics;

    import mx.skins.ProgrammaticSkin;

    public class HorizontalSeparatorSkin extends ProgrammaticSkin
    {
        public function HorizontalSeparatorSkin()
        {
            super();
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            // draw a line at the bottom of the rectangle defined by
            // unscaledWidth and unscaledHeight
            var g:Graphics = this.graphics;
            g.clear();
            g.lineStyle(3, 0x00FF00); // change thickness / color here
            g.moveTo(0,unscaledHeight);
            g.lineTo(unscaledWidth, unscaledHeight);
        }
    }
}

自定义网格（ CustomGrid.as ）：

package
{
    import flash.display.Graphics;
    import flash.display.Sprite;

    import mx.controls.DataGrid;
    import mx.controls.listClasses.ListBaseContentHolder;

    public class CustomGrid extends DataGrid
    {
        public function CustomGrid()
        {
            super();
        }

        override protected function drawHorizontalLine(s:Sprite, rowIndex:int, color:uint, y:Number):void
        {
            var contentHolder:ListBaseContentHolder = s.parent.parent as ListBaseContentHolder;
            var g:Graphics = s.graphics;
            g.lineStyle(3, color); // change the thickness here
            g.moveTo(0, y);
            g.lineTo(contentHolder.width, y);
        }
    }
}