自定义 ProgressBar 组件

样式和 ProgressBar 组件
外观和 ProgressBar 组件

在创作过程中和运行时，可以在水平和垂直方向上将 ProgressBar 组件变形。在创作时，在舞台上选择组件并使用“任意变形”工具或任何“修改”>“变形”命令。在运行时，可使用 ProgressBar 类的 setSize() 方法或适合的属性，比如 height、width、scaleX 和 scaleY。

ProgressBar 有三个外观：轨道外观、进度栏外观和不确定外观。它使用 9 切片缩放来缩放资源。

样式和 ProgressBar 组件

您可以设置样式属性来更改 ProgressBar 实例的外观。ProgressBar 的样式指定绘制组件时组件的外观和填充的值。以下示例放大 ProgressBar 实例的大小并设置其 barPadding 样式。

创建一个新的 FLA 文件。
将 ProgressBar 组件从“组件”面板中拖到舞台上，并为其指定实例名称 myPb。
在主时间轴第 1 帧的“动作”面板中，输入以下代码：
```
myPb.width = 300; 
myPb.height = 30; 
 
myPb.setStyle("barPadding", 3);
```
选择“控制”>“测试影片”。

有关设置外观样式的信息，请参阅关于外观。

外观和 ProgressBar 组件

ProgressBar 组件使用表示进度栏轨道、已完成栏和不确定栏的外观，如下图所示。

ProgressBar 外观

该进度栏放置于轨道外观上，使用 barPadding 来确定位置。使用 9 切片缩放来缩放资源。

在 ProgressBar 实例的 indeterminate 属性设置为 true 时，会使用不确定栏。在垂直方向和水平方向上调整此外观的大小以适合 ProgressBar 的大小。

您可以编辑这些外观以更改 ProgressBar 的外观。例如，以下示例更改了不确定栏的颜色。

创建一个新的 FLA 文件。
将一个 ProgressBar 组件拖到舞台上，并双击该组件以打开其外观图标面板。
双击不确定栏外观。
将缩放控制设置为 400%，以便放大图标进行编辑。
双击某个对角栏，然后在按住 Shift 键的同时单击其余每个对角栏。当前颜色将显示在“属性”检查器的“填充颜色选择器”中。
单击“属性”检查器中的“填充颜色选择器”将其打开，选择颜色 #00CC00 以应用于选择的对角栏。
单击舞台上方编辑栏左侧的“返回”按钮，返回到文档编辑模式。
选择“控制”>“测试影片”。

显示的 ProgressBar 应如下图所示。