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

然后，将皮肤类指定给进度条，然后进行设置。希望有所帮助。

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

1 个答案: