s:Scroller纵向滚动条 增加sparkSkin，添加到css样式表，横向滚动条与此类似。
css文件中添加：
s|Scroller
{
skinClass:ClassReference("window.view.skin.scrollerSkin.ScrollerSkin");
}
window.view.skin.scrollerSkin目录下6个文件如下
ScrollerSkin.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"?
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
<fx:Metadata>
<![CDATA[?
/**?
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Scroller")]
]]>
</fx:Metadata>?
<fx:Script fb:purpose="styling">
<![CDATA[ ? ?
/**
* ?@private
*/
override public function beginHighlightBitmapCapture() : Boolean
{
var needUpdate:Boolean = super.beginHighlightBitmapCapture();
// Draw an opaque rect that fill our entire skin. Our background
// is transparent,but we don't want focus/error skins to
// poke through. ?This is safe to do since we don't have any?
// graphic elements as direct children.
graphics.beginFill(0);
graphics.drawRect(0,width,height);
graphics.endFill();
return needUpdate;
}
/**
* ?@private
*/
override public function endHighlightBitmapCapture() : Boolean
{
var needUpdate:Boolean = super.endHighlightBitmapCapture();
// Clear the rect we drew in beginBitmapCapture();
graphics.clear();
return needUpdate;
}
]]>
</fx:Script>
<!--- ?A vertical scrollbar that lets you control the portion of data that is displayed?
when there is too much data to fit vertically in a display area.
The Scroller determines whether the vertical ScrollBar is visible. -->
<s:VScrollBar id="verticalScrollBar" visible="false" skinClass="window.view.skin.scrollerSkin.ScrollerVScrollBarSkin" />
</s:SparkSkin>
ScrollerVScrollBarSkin.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"?
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5"
alpha.inactive="0.5">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="inactive" />
</s:states>
<fx:Metadata>
<![CDATA[?
[HostComponent("spark.components.VScrollBar")]
]]>
</fx:Metadata>?
<s:Button id="track" top="12" bottom="12" right="0" width="12" focusEnabled="false" horizontalCenter="0"
?skinClass="window.view.skin.scrollerSkin.ScrollerTrackSkin"?
?/>
<s:Button id="thumb" focusEnabled="false" horizontalCenter="0" right="0" left="0"
?skinClass="window.view.skin.scrollerSkin.ScrollerThumbSkin"?
?/>
<s:Button id="decrementButton" top="0" ?focusEnabled="false" horizontalCenter="0" right="0" width="12"
?skinClass="window.view.skin.scrollerSkin.ScrollerUpButtonSkin"?
?/>
<s:Button id="incrementButton" bottom="0" ?focusEnabled="false" horizontalCenter="0" right="0" width="12"
?skinClass="window.view.skin.scrollerSkin.ScrollerDownButtonSkin"?
?/>
</s:SparkSkin>
ScrollerTrackSkin.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"?
xmlns:mx="library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
<![CDATA[?
/**?
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script >
<![CDATA[ ? ? ? ??
/* Define the skin elements that should not be colorized.?
For button,the graphics are colorized but the label is not. */
static private const exclusions:Array = ["labelDisplay"];
/**?
* @private
*/ ? ??
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
} ?
/**
* ?@private
*/
override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number) : void
{
super.updateDisplayList(unscaledWidth,unscaledHeight);
}
private var cornerRadius:Number = 2;
]]> ? ? ? ?
</fx:Script>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- border/fill -->
<s:Rect top="0" bottom="0" horizontalCenter="0" minWidth="12" minHeight="35" alpha="0.5" >
<s:stroke>
<s:SolidColorStroke color="#0631A6" weight="1"/>
</s:stroke>
<s:fill>
<s:SolidColor color="#4078CF" />
</s:fill>
</s:Rect>
</s:SparkSkin>
ScrollerThumbSkin.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"?
xmlns:mx="library://ns.adobe.com/flex/mx"?
xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
<fx:Metadata>
<![CDATA[?
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[ ? ? ? ??
static private const exclusions:Array = ["labelDisplay"];
override public function get colorizeExclusions():Array {return exclusions;}
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
} ?
override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight);
}
private var cornerRadius:Number = 2;
]]> ? ? ? ?
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Rect horizontalCenter="0" top="1" ?bottom="1" minWidth="12" minHeight="14">
<s:stroke>
<s:SolidColorStroke color="#0558BC" color.over="#0631A6" weight="1"/>
</s:stroke>
<s:fill>
<s:SolidColor color="#4682B4" />
</s:fill>
</s:Rect>
</s:SparkSkin>
ScrollerUpButtonSkin.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"?
xmlns:mx="library://ns.adobe.com/flex/mx" alpha.disabled="0.5"?
width="16" height="14"
buttonMode="true"
useHandCursor="true">
<!-- host component -->
<fx:Metadata>
<![CDATA[?
/**?
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script>
<![CDATA[ ? ? ? ??
/* Define the skin elements that should not be colorized.?
For button,unscaledHeight);
}
private var cornerRadius:Number = 2;
]]> ? ? ? ?
</fx:Script>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:BitmapImage source="@Embed('assets/images/arrow_forward.png')"/>
</s:SparkSkin>
ScrollerDownButtonSkin.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"?
xmlns:mx="library://ns.adobe.com/flex/mx" alpha.disabled="0.5"?
width="16" height="14"
buttonMode="true"
useHandCursor="true">
<!-- host component -->
<fx:Metadata>
<![CDATA[?
/**?
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script>
<![CDATA[ ? ? ? ??
/* Define the skin elements that should not be colorized.?
For button,unscaledHeight);
}
private var cornerRadius:Number = 2;
]]> ? ? ? ?
</fx:Script>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:BitmapImage source="@Embed('assets/images/arrow_backward.png')"/>
</s:SparkSkin>
两个图片：
assets/images/arrow_backward.png
assets/images/arrow_forward.png
滚动条效果如下：
注：应用文件中需加载相应的样式文件
例：StyleManager.getStyleManager(null).loadStyleDeclarations("assets/***.swf");//加载皮肤
欢迎纠错！
