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); 
    } 

然后你分配你的皮肤类的进度条和你设置。希望有所帮助。