Adobe AIR and Flex - 實現堆棧容器

1.需求描述：

    在對雲平臺的監控中，咱們常常須要在一張圖上可視化的描述集羣下的物理機所虛擬的虛擬機使用狀況，以及超賣狀況。那麼傳統的chart圖就不知足咱們的需求了，那麼要實現這樣一個定製化的chart圖，反向LIST容器（堆棧容器)，可謂是咱們的橋樑，以下圖：

  

二、Demo實現

  咱們如何實現這樣的效果呢？首先，大多數狀況下須要一個反向list容器，那麼FLEX提供的默認list容器又是從上往下的，很顯然不知足咱們的需求，

咱們須要自定義一個這樣的容器。步驟：

(1)繼承BaseLayout類  (2)重寫updateDisplayList()

 

三、具體實現

 

 1 /**
 2  * Created with IntelliJ IDEA.
 3  * @author: DongYang
 4  * Date: 13-7-24
 5  * Time: 上午10:22
 6  * Progress every day a little more.
 7  */
 8 package component.charts.layout
 9 {
10     import mx.core.ILayoutElement;
11     import mx.core.UIComponent;
12     
13     import spark.layouts.BasicLayout;
14     
15     public class StackLayout extends BasicLayout
16     {
17         public function StackLayout()
18         {
19             super();
20         }
21         private var _gap:int = 6;
22 
23         public function get gap():int
24         {
25             return _gap;
26         }
27 
28         public function set gap(value:int):void
29         {
30             _gap = value;
31            if(!this.target) return;
32             target.invalidateDisplayList();
33             target.invalidateSize();
34         }
35 
36         override public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
37         {
38             super.updateDisplayList(unscaledWidth, unscaledHeight);
39             if(!this.target)  
40                 return;  
41             
42             var layoutElement:ILayoutElement;  
43             var count:uint = target.numElements;  
44          
45             var h : Number = target.height;
46             var depth:Number=0;
47             
48             for (var i:int = 0; i < count; i++)  
49             {  
50                 layoutElement = target.getElementAt(i);  
51                 
52                 if (!layoutElement || !layoutElement.includeInLayout)  
53                     continue;  
54               
55                 var _eh:Number=UIComponent(layoutElement).height;
56                 var _y:Number=0;
57                 if(i==0){
58                     depth=depth+_eh;
59                 }else{
60                     depth=depth+_eh+gap;
61                 }
62                 _y=h-depth;
63                 layoutElement.setLayoutBoundsPosition( 0, _y );
64             }
65         }
66     
67     }
68 }

View Code

四、使用方法

讓容器的layout實例等於 new StackLayout();

如：

 1 /**
 2  * Created with IntelliJ IDEA.
 3  * @author: DongYang
 4  * Date: 13-7-25
 5  * Time: 上午11:41
 6  * Progress every day a little more.
 7  */
 8 package component.charts.container {
 9 import component.charts.layout.StackLayout;
10 
11 import spark.components.Group;
12 
13 public class StackGroup extends Group {
14     public function StackGroup() {
15         super();
16         _lay=new StackLayout();
17         this.layout=_lay;
18     }
19     private var _lay:StackLayout;
20     private var _gap:Number=6;
21 
22     public function get gap():Number {
23         return _gap;
24     }
25 
26     public function set gap(value:Number):void {
27         _gap = value;
28         _lay.gap=value;
29     }
30 }
31 }

View Code

其中gap是子元素之間的間隔距離

這樣咱們在StackGroup裏放子元素的話，就能夠看到子元素「入棧」了。

注：使用StackGroup容器的時候，必須指定它的高度。咱們想一想在平常生活中，咱們要向一個桶裏裝水，確定是提早知道它的容量的。