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种颜色。我想根据progressBar值使用这种颜色。你能帮忙解决一下，如何在Progressbar中使用相同的皮肤显示不同的颜色。

Answer 1

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

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>

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

<强> 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创建一个新皮肤，并直接在MXML皮肤中更改颜色并将其影响到组件（barSkin =＆＃34; YourNewSkin＆＃34;）

Answer 3

在spark设计中，ProgressBar Track默认使用chrome颜色。（在ProgressBarTrackSkin中定义）所以你可以设置它：

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

您还可以为曲目创建自己的皮肤

<mx:ProgressBar trackSkin="myCustomTrackSkin" />

因此，如果您不想从scretch开始，您可以复制原始皮肤并实施更改原始皮肤可以在：

找到

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

在进度条+ Flex 4中替代barColor属性

3 个答案: