如何在 Flex 3 中增加水平网格线的粗细

Posted 2023-02-22

【中文标题】如何在 Flex 3 中增加水平网格线的粗细

【英文标题】：How to increase horizontalgridline thickness in Flex 3

【发布时间】：2012-08-31 12:19:33

【问题描述】：

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

【参考方案1】：

有两种方法可以解决这个问题。如果您查看文档，DataGrid 具有 horizontalSeparatorSkin 样式。文档声明默认情况下这是未定义的，在这种情况下，网格使用它的 drawHorizontalLine() 方法来绘制线条。

因此，您可以将horizontalSeparatorSkin 样式设置为您自己的扩展ProgramaticSkin 的类或 扩展DataGrid 类并覆盖drawHorizontalLine() 方法。两者都相当容易做到，这里的应用程序每个都有一个示例：

应用

<?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>

程序化皮肤 (HorizontalSeparatorSkin.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);