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 是进度条颜色。按需修改即可。

 

    除了改颜色，还可以把 ...  或  ... 里面改掉使之更个性，如：

 效果如下：

  

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 等 ）放在此处）

mx|Progress {
   font-size: 12;
   font-weight: normal;
   vertical-gap: 0;
}

 

2) 个别（通过id或其他方式）:  

#progressBar{
    bar-skin: ClassReference("skins.ProgressBarSkin");
    track-skin: ClassReference("skins.ProgressBarTrackSkin");
    indeterminate-skin: ClassReference("skins.ProgressIndeterminateSkin");
    indeterminate-move-interval: 20;
}

 

ProgressBar 常用属性：

color: label文字颜色；

fontSize: label文字大小；

fontWeight: label文字是否加粗；

verticalGap: label与进度条的垂直间距（当 labelPlacement="top" "bottom" "center" 时有效）；

trackHeight: 整个ProgressBar高度；

themeColor: Halo主题下默认的ProgressBar颜色是蓝条+白底，如果仅需要简单的改变这一组颜色，可使用该属性（该属性 Halo 主题下有效，Spark 下无效）；

barSkin: 进度条的皮肤；

trackSkin: 进度条轨迹皮肤（行进时的样式）；

indeterminateMoveInterval: 不确定的进度条的斜块间距（从字面看该解释不是特别准确，具体表现为：值越小斜块越密）；

indeterminateSkin: 不确定的进度条的皮肤；

 

 

附：《Flex与ActionScript3程序开发》11.8 ProgressBar组件 学习 Mindmap 

 

• 
• 大小: 4.3 KB

• 
• 大小: 73.6 KB

• 查看图片附件