Как увеличить толщину горизонтального градиента в Flex 3

Question

Я установил горизонтальные линии сетки между строками datagrid на true. Но я не могу увеличить его толщину. как это сделать?

Answer 1

Существует два способа решения этой проблемы. Если вы проверяете документы, DataGrid имеет стиль horizontalSeparatorSkin. Документы утверждают, что по умолчанию это значение не определено, и в этом случае сетка использует метод drawHorizontalLine() для рисования строк.

Таким образом, вы можете установить horizontalSeparatorSkin стиль на свой собственный класс, расширяющий ProgramaticSkinили расширить DataGrid класс и переопределить метод drawHorizontalLine(). Оба довольно легко сделать, вот приложение с примером каждого из них:

App

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

Programatic кожи (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); 
     } 
    } 
}