actionscript-3 - Flex 3 で水平グリッド線の太さを増やす方法

Question

データグリッドの行間の水平グリッド線を true に設定しました。しかし、私はその厚さを増やすことができません。どうやってするの？

Answer 1

これを解決するには2つの方法があります。ドキュメントを確認すると、DataGridにはhorizo​​ntalSeparatorSkinスタイルがあります。ドキュメントには、これはデフォルトでは未定義であると記載されており、その場合、グリッドはその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);
        }
    }
}