actionscript-3 - 如何增加 Flex 3 中的水平网格线厚度

Question

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

Answer 1

有两种方法可以解决这个问题。如果您检查文档，DataGrid 有一个 horizontalSeparatorSkin风格。文档指出，默认情况下这是未定义的，在这种情况下，网格使用其 drawHorizo​​ntalLine() 方法来绘制线条。

因此，您可以将 horizo​​ntalSeparatorSkin 样式设置为您自己的扩展 ProgramaticSkin 的类或扩展 DataGrid类并重写drawHorizo​​ntalLine()方法。两者都很容易做到，这里的应用程序包含每一个的示例:

应用程序

<?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);
        }
    }
}