Flex/AIR个性化——ProgressBar

在Spark主题下，ProgressBar 的边框、进度条等都由skin 来控制，主要有4个skin，其默认分别为：

mx.skins.spark.ProgressBarSkin?进度条的样式

mx.skins.spark.ProgressBarTrackSkin 进度条背景的样式

mx.skins.spark.ProgressBarIndeterminateSkin 用于不确定类型的ProgressBar

mx.skins.spark.ProgressBarMaskSkin 暂未研究

可在 FlexSDK 下的 sparkskins.swc 下找到这些类。

?

1. 以这些默认的skin为基础，将其代码copy到新建的skin类，然后修改其中相应的部分即可。

1) ProgressBarSkin 主要有3部分：

a)?片段1 进度条的颜色：

???

??? 0xFFFFFF 是进度条颜色。按需修改即可。
?
??? 除了改颜色，还可以把 <s:LinearGradient rotation="90"> ... </s:LinearGradient>?或?<s:fill> ... </s:fill> 里面改掉使之更个性，如：
?效果如下：

??
b) 片段2 进度条的边框（是进度条的边框，而不是整个 ProgressBar 的边框）：
?
??? 按需修改即可。
?
c) 片段3（尚不太清楚有什么作用）：
?
?
2) ProgressBarTrackSkin 主要有4部分：
a)?片段1 ProgressBar边框：
??? 
??? 
b)?片段2? ProgressBar内边框：
??
? 
c)?片段3 ProgressBar背景：
?
?? 
d)?片段4 内阴影：
??? 
?
3) ProgressIndeterminateSkin 是AS类形式的，其基类是 mx.skins.Border ：
找到 private static var colors:Array = [0xCCCCCC, 0x808080]; 
这句就是控制斜块颜色的（bar 仍然由 ProgressBarSkin 控制）。
以上只是最简单的修改，要更个性可以修改方法 updateDisplayList 里的内容。
?
?
?
2.?通过 CSS 来控制全局应用或个别应用 ProgressBar 样式（建议：将与样式相关的属性设置都独立到?CSS 文件中）
1) 全局: （建议：将适合应用到全局的（如?fontSize 等?）放在此处）
trackHeight: 整个ProgressBar高度；
themeColor: Halo主题下默认的ProgressBar颜色是蓝条+白底，如果仅需要简单的改变这一组颜色，可使用该属性（该属性 Halo 主题下有效，Spark 下无效）；
barSkin: 进度条的皮肤；
trackSkin: 进度条轨迹皮肤（行进时的样式）；
indeterminateMoveInterval: 不确定的进度条的斜块间距（从字面看该解释不是特别准确，具体表现为：值越小斜块越密）；
indeterminateSkin: 不确定的进度条的皮肤；
?
?
附：《Flex与ActionScript3程序开发》11.8 ProgressBar组件 学习 Mindmap?


?