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

Question

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

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

然后将您的外观类分配给进度栏并进行设置。希望有帮助。