flex ProgressBar skin 批改

flex ProgressBar skin 修改

f3的形式修改border:

其中 barSkin 是外边框样式，MyProgressTrackSkin 继承 mx.skins.halo.ProgressBarSkin;

trackSkin是加载精度条的样式 MyProgressTrackSkin 继承 mx.skins.halo.ProgressTrackSkin;

_progressBar.setStyle("trackSkin",com.skin.MyProgressTrackSkin); _progressBar.setStyle("barSkin",com.skin.MyProgressBarSkin);

 

f4形式skin

barskin.mxml:

<?xml version="1.0" encoding="utf-8"?> 
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Script> 
override protected function initializationComplete():void {
useChromeColor = true; super.initializationComplete(); 
} 
</fx:Script>
<!-- layer 1: fill --> 
<s:Rect left="2" right="2" top="2" bottom="2" topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6" bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6"> 
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x154c87" alpha="1" /> 
<s:GradientEntry color="0x154c87" alpha="1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 2: border -->
<s:Rect left="2" right="2" top="2" bottom="2" topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6" bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">
<s:stroke> 
<s:LinearGradientStroke rotation="90">
<s:GradientEntry color="0x154c87" alpha=".9" />
<s:GradientEntry color="0x154c87" alpha="0.5" />
</s:LinearGradientStroke>
</s:stroke> 
</s:Rect> 
<!-- layer 3: right edge --> 
<s:Rect right="1" top="2" bottom="2" width="1" >
<s:fill>
<s:SolidColor color="0xffffff" alpha="0.55" />
</s:fill> 
</s:Rect> 
</s:SparkSkin> 

 

2.trackSkin.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minHeight="13" > 

<fx:Script>

override protected function initializationComplete():void {

useChromeColor = true; super.initializationComplete(); 

}

</fx:Script> 

<!-- layer 1: border -->

<s:Rect left="0" right="0" top="0" bottom="0" width="199" topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6" bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6"> 

<s:stroke> 

<s:LinearGradientStroke rotation="90">

<s:GradientEntry color="0xFFFFFF" alpha=".12" /> 

<s:GradientEntry color="0xFFFFFF" alpha="0.8" /> 

</s:LinearGradientStroke> </s:stroke> 

</s:Rect> 

<!-- layer 2: inner border -->

<s:Rect left="1" right="1" top="1" bottom="1" topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6" bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">

<s:stroke> 

<s:SolidColorStroke color="0x939393" alpha="1" />

</s:stroke> 

</s:Rect>

<!-- layer 3: fill --> 

<s:Rect left="2" right="2" top="2" bottom="2" topLeftRadiusX="6" topLeftRadiusY="6" topRightRadiusX="6" topRightRadiusY="6" bottomLeftRadiusX="6" bottomLeftRadiusY="6" bottomRightRadiusX="6" bottomRightRadiusY="6">

<s:fill>

<s:LinearGradient rotation="90"> 

<s:GradientEntry color="0xeeeeee" alpha="1" />

<s:GradientEntry color="0xeeeeee" alpha="1" />

</s:LinearGradient> 

</s:fill> 

</s:Rect>

<!-- layer 4: inner shadow -->

<s:Rect left="2" top="2" bottom="2" width="1" >

<s:fill> 

<s:SolidColor color="0x000000" alpha="0.12" /> 

</s:fill> 

</s:Rect> 

<s:Rect right="2" top="2" bottom="2" width="1" >

<s:fill> 

<s:SolidColor color="0x000000" alpha="0.12" />

</s:fill>

</s:Rect>

<s:Rect left="3" top="2" right="3" height="1" > 

<s:fill> 

<s:SolidColor color="0x000000" alpha="0.12" />

</s:fill>

</s:Rect>

</s:SparkSkin>