Adobe AIR and Flex - 实现堆栈容器

1.需求描述：

在对云平台的监控中，我们经常需要在一张图上可视化的描述集群下的物理机所虚拟的虚拟机使用情况，以及超卖情况。那么传统的chart图就不满足我们的需求了，那么要实现这样一个定制化的chart图，反向LIST容器（堆栈容器)，可谓是我们的桥梁，如下图：

aaarticlea/png;base64,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" alt="" />

2、Demo实现

我们如何实现这样的效果呢？首先，大多数情况下需要一个反向list容器，那么FLEX提供的默认list容器又是从上往下的，很显然不满足我们的需求，

我们需要自定义一个这样的容器。步骤：

(1)继承BaseLayout类  (2)重写updateDisplayList()

3、具体实现

 /**
  * Created with IntelliJ IDEA.
  * @author: DongYang
  * Date: 13-7-24
  * Time: 上午10:22
  * Progress every day a little more.
  */
 package component.charts.layout
 {
     import mx.core.ILayoutElement;
     import mx.core.UIComponent;
 
     import spark.layouts.BasicLayout;
 
     public class StackLayout extends BasicLayout
     {
         public function StackLayout()
         {
             super();
         }
         private var _gap:int = 6;
 
         public function get gap():int
         {
             return _gap;
         }
 
         public function set gap(value:int):void
         {
             _gap = value;
            if(!this.target) return;
             target.invalidateDisplayList();
             target.invalidateSize();
         }
 
         override public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
         {
             super.updateDisplayList(unscaledWidth, unscaledHeight);
             if(!this.target)
                 return;  
 
             var layoutElement:ILayoutElement;
             var count:uint = target.numElements;  
 
             var h : Number = target.height;
             var depth:Number=0;
 
             for (var i:int = 0; i < count; i++)
             {
                 layoutElement = target.getElementAt(i);  
 
                 if (!layoutElement || !layoutElement.includeInLayout)
                     continue;  
 
                 var _eh:Number=UIComponent(layoutElement).height;
                 var _y:Number=0;
                 if(i==0){
                     depth=depth+_eh;
                 }else{
                     depth=depth+_eh+gap;
                 }
                 _y=h-depth;
                 layoutElement.setLayoutBoundsPosition( 0, _y );
             }
         }
 
     }
 }

4、使用方法

让容器的layout实例等于 new StackLayout();

如：

 /**
  * Created with IntelliJ IDEA.
  * @author: DongYang
  * Date: 13-7-25
  * Time: 上午11:41
  * Progress every day a little more.
  */
 package component.charts.container {
 import component.charts.layout.StackLayout;
 
 import spark.components.Group;
 
 public class StackGroup extends Group {
     public function StackGroup() {
         super();
         _lay=new StackLayout();
         this.layout=_lay;
     }
     private var _lay:StackLayout;
     private var _gap:Number=6;
 
     public function get gap():Number {
         return _gap;
     }
 
     public function set gap(value:Number):void {
         _gap = value;
         _lay.gap=value;
     }
 }
 }

其中gap是子元素之间的间隔距离

这样我们在StackGroup里放子元素的话，就可以看到子元素“入栈”了。

注：使用StackGroup容器的时候，必须指定它的高度。我们想想在日常生活中，我们要向一个桶里装水，肯定是提前知道它的容量的。