Flex：如何制作进度条皮肤？

Question

我想在我的进度条上设置一个自定义皮肤，但它没有按照我想要的方式工作。我的皮肤上有 3 种不同的颜色（绿色、黄色、红色），绿色应该显示到大约 50%，然后我希望黄色出现在绿色之后，红色出现在绿色和黄色之后的 90%。所以在 100% 时，它们都应该显示出来。

问题在于 ProgressBar 仅设置我的皮肤宽度，因此所有颜色都始终显示。但是，如果我使用了 indeterminateSkin 但没有将 indeterminate 设置为 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); 
    }

然后你将你的皮肤类分配给你的进度条，你就设置好了。希望对您有所帮助。