Mar 29
下面的例子演示了Flex中如何通过设置barSkin风格，设定进度条(ProgressBar)的自定义皮肤(Skin)。
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：
下面是完整代码：
Download: main.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical"
- verticalAlign="middle"
- backgroundColor="white">
- <mx:Script>
- <![CDATA[
- import mx.events.SliderEvent;
- private function init():void {
- var c:Class = progressBar.getStyle("indeterminateSkin");
- progressBar.setStyle("barSkin", c);
- progressBar.setProgress(15, 100);
- }
- private function progressBar_change(evt:SliderEvent):void {
- progressBar.setProgress(evt.value, 100);
- }
- ]]>
- </mx:Script>
- <mx:ApplicationControlBar dock="true">
- <mx:Form styleName="plain">
- <mx:FormItem label="value:">
- <mx:HSlider id="slider"
- minimum="0"
- maximum="100"
- value="15"
- liveDragging="true"
- snapInterval="1"
- tickInterval="10"
- dataTipPrecision="0"
- change="progressBar_change(event);" />
- </mx:FormItem>
- </mx:Form>
- </mx:ApplicationControlBar>
- <mx:ProgressBar id="progressBar"
- mode="manual"
- labelPlacement="center"
- height="50"
- creationComplete="init();" />
- </mx:Application>
另外你可以将barSkin风格定义在一个.CSS文件或者<mx:Style />中，大致像下面这样：
- ProgressBar {
- barSkin: ClassReference("mx.skins.halo.ProgressIndeterminateSkin");
- }
或者你可以在MXML中利用下面的代码设置barSkin风格：
- <mx:ProgressBar id="progressBar"
- barSkin="mx.skins.halo.ProgressIndeterminateSkin"
- mode="manual"
- labelPlacement="center"
- height="50" />
原文作者：Peter deHaan 翻译：minidxer
