HDividedBox与VDividedBox的分隔条样式设定

Flex的HDividedBox与VDividedBox组件的分隔条样式比较单一，默认是三条横线或竖线（mx.skin.BoxDividerSkin类，包含在Assets.swf文件中），且不能设置分隔条的整体颜色。当然，可以通过设置样式dividerSkin改变那三条线的默认样式。不过看mx.containers.dividedBoxClasses.BoxDivider的代码，显示时对于横向与纵向分隔，只是简单地旋转dividerSkin，因此稍复杂一些的dividerSkin效果应该不会太好，很有必要设置两个dividerSkin，横向纵向各一个，专款专用。此外，可以考虑再给分隔条加一个背景皮肤。

　　接下来写需要的几个皮肤，分隔条背景皮肤是淡蓝色的渐变填充外加一个深蓝色边框，knob皮肤（替代dividerSkin的那个）是两排蓝白色小点。

1) 纵向分隔条背景皮肤：
package com.ccac.ibs.skins.common
{
 
 import flash.display.GradientType;
 import flash.display.Graphics;
 import flash.display.InterpolationMethod;
 import flash.display.SpreadMethod;
 import flash.geom.Matrix;
 
 import mx.skins.ProgrammaticSkin;
 
 public class IBSVBoxDividerSkin extends ProgrammaticSkin
 {
  
  public function IBSVBoxDividerSkin()
  {
   super();
  }
  
  override protected function updateDisplayList(w:Number, h:Number):void
  {
   var g:Graphics = graphics;
   var matrix:Matrix = new Matrix();
   if (isNaN(w) || isNaN(h))
    return; 
   g.clear();
   g.lineStyle(1, 0x6593CF, 1);
   g.beginFill(0xFFFFFF, 0);
   g.drawRect(0, 0, w - 1, h - 1);
   g.endFill();
   matrix.createGradientBox(w - 2, h - 2, Math.PI / 2, 0, 0);
   g.lineStyle(0, 0x000000, 0);
   g.beginGradientFill(GradientType.LINEAR,
     [0xFFFFFF, 0xF8FBFF, 0xF0F7FF, 0xE5F1FF, 0xDAEBFF, 0xD0E5FF],
     [1, 1, 1, 1, 1, 1],
     [0, 51, 102, 153, 204, 255],
     matrix,
     SpreadMethod.PAD,
     InterpolationMethod.LINEAR_RGB,
     0);
   g.drawRect(1, 1, w - 2, h - 2);
   g.endFill();
  }
  
 }
 
}

 

 

2) 纵向分隔条knob皮肤：

 

package com.ccac.ibs.skins.common
{
 
 import flash.display.Graphics;
 
 import mx.skins.ProgrammaticSkin;
 
 public class IBSVDividerSkin extends ProgrammaticSkin
 {
  
  public function IBSVDividerSkin()
  {
   super();
  }
  
  override public function get measuredWidth():Number
  {
   return 23;
  }
  
  override public function get measuredHeight():Number
  {
   return 6;
  }
  
  override protected function updateDisplayList(w:Number, h:Number):void
  {
   var g:Graphics = this.graphics;
   var i:int = 0;
   g.clear();
   g.lineStyle(0, 0x000000, 0);
   g.beginFill(0x6593CF, 1);
   for (i = 0; i < 5; i++)
   {
    g.drawRect(2 + (i - 1) * 4, 2, 2, 2);
   }
   g.endFill();
   g.beginFill(0xF9F9FB, 1);
   for (i = 0; i < 5; i++)
   {
    g.drawRect(3 + (i - 1) * 4, 3, 2, 2);
   }
   g.endFill();
   g.beginFill(0xADD1FF, 1);
   for (i = 0; i < 5; i++)
   {
    g.drawRect(3 + (i - 1) * 4, 3, 1, 1);
   }
   g.endFill();
  }
  
 }
 
}

 

 

3) 横向分隔条背景皮肤：

 

package com.ccac.ibs.skins.common
{
 
 import flash.display.GradientType;
 import flash.display.Graphics;
 import flash.display.InterpolationMethod;
 import flash.display.SpreadMethod;
 import flash.geom.Matrix;
 
 import mx.skins.ProgrammaticSkin;
 
 public class IBSHBoxDividerSkin extends ProgrammaticSkin
 {
  
  public function IBSHBoxDividerSkin()
  {
   super();
  }
  
  override protected function updateDisplayList(w:Number, h:Number):void
  {
   var g:Graphics = graphics;
   var matrix:Matrix = new Matrix();
   if (isNaN(w) || isNaN(h))
    return; 
   g.clear();
   g.lineStyle(1, 0x6593CF, 1);
   g.beginFill(0xFFFFFF, 0);
   g.drawRect(0, 0, w - 1, h - 1);
   g.endFill();
   matrix.createGradientBox(w - 2, h - 2, 0, 0, 0);
   g.lineStyle(0, 0x000000, 0);
   g.beginGradientFill(GradientType.LINEAR,
     [0xFFFFFF, 0xF8FBFF, 0xF0F7FF, 0xE5F1FF, 0xDAEBFF, 0xD0E5FF],
     [1, 1, 1, 1, 1, 1],
     [0, 51, 102, 153, 204, 255],
     matrix,
     SpreadMethod.PAD,
     InterpolationMethod.LINEAR_RGB,
     0);
   g.drawRect(1, 1, w - 2, h - 2);
   g.endFill();
  }
  
 }
 
}

 

4) 横向分隔条knob皮肤：

package com.ccac.ibs.skins.common
{
 
 import flash.display.Graphics;
 
 import mx.skins.ProgrammaticSkin;
 
 public class IBSHDividerSkin extends ProgrammaticSkin
 {
  
  public function IBSHDividerSkin()
  {
   super();
  }
  
  override public function get measuredWidth():Number
  {
   return 6;
  }
  
  override public function get measuredHeight():Number
  {
   return 23;
  }
  
  override protected function updateDisplayList(w:Number, h:Number):void
  {
   var g:Graphics = this.graphics;
   var i:int = 0;
   g.clear();
   g.lineStyle(0, 0x000000, 0);
   g.beginFill(0x6593CF, 1);
   for (i = 0; i < 5; i++)
   {
    g.drawRect(2, 2 + (i - 1) * 4, 2, 2);
   }
   g.endFill();
   g.beginFill(0xF9F9FB, 1);
   for (i = 0; i < 5; i++)
   {
    g.drawRect(3, 3 + (i - 1) * 4, 2, 2);
   }
   g.endFill();
   g.beginFill(0xADD1FF, 1);
   for (i = 0; i < 5; i++)
   {
    g.drawRect(3, 3 + (i - 1) * 4, 1, 1);
   }
   g.endFill();
  }
  
 }
 
}

 

 

 

 

 

DividedBoxDemo.rar (317.6 KB)