2

塗りつぶしの色でパフォーマンスを表示するために、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 の値に基づいて使用したいと考えています。プログレスバーで同じスキンを使用して別の色を表示する方法を教えてください。

4

3 に答える 3

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"  />

この例は機能します。

于 2011-04-22T13:56:13.303 に答える
0

Sparkデザインでは、ProgressBarTrackはデフォルトでクロム色を使用します。（ProgressBarTrackSkinで定義）したがって、次のように設定できます。

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

トラック用に独自のスキンを作成することもできます

<mx:ProgressBar trackSkin="myCustomTrackSkin" />

したがって、元のスキンをコピーして、スクラッチから始めたくない場合は変更を実装できます。元のスキンは次の場所にあります。

SDK / frameworks / projects / sparkskins / src / mx / skins / spark/ProgressBarTrackSkin.mxmlへのパス

于 2011-11-18T08:41:30.630 に答える
0

Create a new Skin based on mx.skins.spark.ProgressBarSkin and change the color directly in the MXML Skin and affect it to the component (barSkin="YourNewSkin")

于 2011-03-02T16:57:25.887 に答える