进度条中 barColor 属性的替代方案 +弹性4

Question

我在 ProgressBar 组件中使用了属性“barColor”，用于显示填充颜色的性能。现在我正在将应用程序移至 Flex 4。因此，此属性在 Flex 4 中不可用。请问任何知道 barColor 属性替代方案的人都可以吗？ Spark 不支持此属性。

<mx:ProgressBar xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:mx="library://ns.adobe.com/flex/mx" 
                    width="100%" x="0" y="0" 
                              height="20"
                              label=""
                              labelPlacement="center"     
                              minimum="0"
                              id="iops"
                              maximum="1000"                                  
                              mode="manual"
                  barSkin="{progressSkin}">

和 ProgressSkin 类：-

<fx:Metadata>
    [HostComponent("progressBarComponent")]
</fx:Metadata>

<fx:Script>
    <![CDATA[
        override protected function initializationComplete():void {
            useChromeColor = true;
            super.initializationComplete();
        }
    ]]>
</fx:Script>

<s:Rect top="0" right="0" left="0" bottom="0"  id="green" includeInLayout="{hostComponent.color==0x94CF65}">        
    <s:fill >
        <s:SolidColor color="0x94CF65" />
    </s:fill>
</s:Rect>

<s:Rect top="0" right="0" left="0" bottom="0"  includeInLayout="{hostComponent.color==0xFFDE53}">       
    <s:fill>
        <s:SolidColor color="0xFFDE53" />
    </s:fill>
</s:Rect>

<s:Rect top="0" right="0" left="0" bottom="0" includeInLayout="{hostComponent.color==0xFF9428}">        
    <s:fill>
        <s:SolidColor color="0xFF9428" />
    </s:fill>
</s:Rect>

我的皮肤类别有 3 种颜色。我想根据进度条值使用这种颜色。您能否帮忙解决同样的问题，如何通过在进度栏中使用相同的皮肤来显示不同的颜色。

Answer 1

首先我们需要编写一个进度条类并扩展进度条类

ColorChangingProgressBar.as

package
{
    import mx.controls.ProgressBar;

    [Style(name="progressBarColor", type="Number", format="Color")]
    public class ColorChangingProgressBar extends ProgressBar
    {
        public function ColorChangingProgressBar()
        {
            super();
        }
    }

}

，然后编写进度条的皮肤类。

ColorChangingProgressBarBarSkin.mxml

<!-- states -->
<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
</s:states>

<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        private var _barColor:Number = 0;

        [Bindable]
        public function get barColor():Number
        {
            return _barColor;
        }

        public function set barColor(value:Number):void
        {
            _barColor = value;
        }


        /**
         * Listen for any changes to the style so we can update our progres bar skin if needed
         */
        override public function styleChanged(styleProp:String):void
        {
            super.styleChanged(styleProp);
        }


        /**
         * Initialize the skin by setting up the bar color
         */
        protected function initSkin(event:FlexEvent):void
        {
            barColor = this.getStyle("progressBarColor") as Number;
        }

    ]]>
</fx:Script>

<s:Rect top="0" right="0" left="0" bottom="0">
    <s:fill>
        <s:SolidColor color="{barColor}" />
    </s:fill>
</s:Rect>

并且需要将皮肤类添加到应用程序中。

ProgressBarExample.mxml

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    @namespace local "*";

    local|ColorChangingProgressBar
    {
        barSkin: ClassReference("ColorChangingProgressBarBarSkin"); 
    }

</fx:Style>

<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;


        protected function application1_creationCompleteHandler(event:FlexEvent):void
        {
            progressBar.setProgress(50, 100);
            progressBar2.setProgress(75, 100);
            progressBar3.setProgress(85, 100);
        }

    ]]>
</fx:Script>

<s:layout>
    <s:VerticalLayout paddingLeft="10" paddingRight="10" />
</s:layout>

<local:ColorChangingProgressBar id="progressBar" progressBarColor="#ff0000" label="" width="300" mode="manual"  />
<local:ColorChangingProgressBar id="progressBar2" progressBarColor="#00ff00" label="" width="300" mode="manual"  />
<local:ColorChangingProgressBar id="progressBar3" progressBarColor="#0000ff" label="" width="300" mode="manual"  />

这个例子会起作用。

Answer 2

基于 mx.skins.spark.ProgressBarSkin 创建新的 Skin 并直接在 MXML Skin 中更改颜色并影响到组件 (barSkin="YourNewSkin")

Answer 3

在 Spark 设计中，ProgressBar Track 默认使用镀铬颜色。 （在ProgressBarTrackSkin中定义）
所以你只需设置它：

<mx:ProgressBar width="200" trackHeight="20" chromeColor="#00FF00" />

你还可以为轨道创建自己的皮肤

<mx:ProgressBar trackSkin="myCustomTrackSkin" />

因此，如果你不想从头开始，你可以复制原始皮肤并实施你的更改
原始皮肤可以在以下位置找到：

SDK/frameworks/projects/sparkskins/src/mx/skins/spark/ProgressBarTrackSkin.mxml 的路径