Flex：如何製作progressbar皮膚？

Question

我想在我的progressBar上設置一個自定義皮膚，但它沒有按照我希望的方式工作。我的皮膚上有3種不同的顏色（綠色，黃色，紅色），綠色應顯示直到約50％，然後我希望黃色出現在綠色和黃色後綠色和黃色90％。所以100％都應該顯示。

問題是，ProgressBar只設置了我的皮膚的寬度，所以所有的顏色總是顯示。但是，如果我使用indeterminateSkin，但不設置不確定性爲true，不會發生。

我該如何製作一個不會改變寬度的皮膚？ Atm我只是使用一個MovieClip皮膚。

Answer 1

我在過去使用編程皮膚完成了這項工作。您需要創建自己的ProgressBarSkin和ProgressBarMaskSkin版本以及可選的ProgressBarTrackSkin。在你ProgressBarSkin，你可以重寫方法的updateDisplayList像這樣：

override protected function updateDisplayList(w:Number, h:Number):void { 
     super.updateDisplayList(w, h); 
     graphics.clear(); 

     var fullWidth:int = w; 
     if (parent != null && (parent as UIComponent).mask != null) 
      fullWidth = (parent as UIComponent).mask.width; 

     var matrix:Matrix = new Matrix(); 
     matrix.createGradientBox(fullWidth, h); 
     var colors:Array = [0xd00000, 0xf0d000, 0x00ff00]; 

     this.graphics.lineStyle(); 
     this.graphics.beginGradientFill(GradientType.LINEAR, colors, [1,1,1], [0,128,255], matrix); 
     this.graphics.drawRoundRect(2, 2, w - 4, h - 4, h - 4); 
    } 

而在你ProgressBarMaskSkin做到這一點：

override protected function updateDisplayList(w:Number, h:Number):void { 
     super.updateDisplayList(w, h); 
     graphics.clear(); 

     this.drawRoundRect(2, 2, w - 4, h - 4, (h - 4)/2, 0xffffff, 1); 
    } 

然後你分配你的皮膚類的進度條和你設置。希望有所幫助。