• JoeDevProgressBar 扩展
  • 下载
  • 基本信息
  • 快速上手
  • 方法
  • 事件
  • 使用技巧
    • 让渐变跨段流动
  • 注意事项
  • 版权信息

« 返回首页

JoeDevProgressBar 扩展

在水平布局中创建分段进度条：段数、每段的高度、边距、颜色、圆角全部可以用积木定制， 支持颜色渐变和统一的总进度控制（0-100 按段依次点亮）。一个组件实例可以同时创建多条进度条。

下载

joejsanz.joedevprogressbar.aix

ProgressBar.aia - 原作者示例项目

基本信息

• 版本：v1.4（2025-03-13，原帖最新版）
• JDK：11
• 最低 API 级别：21（maxSdk 34）
• 构建方式：FAST-CLI v2.6.0
• 原作者：Joe J. Sánchez（Joejsanz）

快速上手

1. 设计器里放一个水平布局当进度条容器，再拖入一个 JoeDevProgressBar（非可视组件）
2. 用 InitializeSegmentedProgressBar 初始化：给这条进度条分配一个数字 id（一个组件实例可以创建多条进度条，之后所有积木都靠 id 指定操作哪一条），指定容器布局、段数和每段的颜色列表
3. 用 SetTotalProgress 设置总进度（0-100），进度会按段依次点亮；到 100% 时触发 TotalProgressComplete 事件

• 使用渐变填 true 时，整条进度条的颜色平滑过渡；形状 v1.4 起提供辅助积木选择（如 roundShape 圆角胶囊形、squareShape 直角）
• 颜色列表 v1.4 起支持直接用 AI2 的颜色积木，也兼容十六进制颜色

方法

InitializeSegmentedProgressBar初始化分段进度条(id,布局,段数,颜色列表,形状,使用渐变)

在指定的水平布局中初始化一条分段进度条。id 是这条进度条的编号，后续所有积木靠 id 区分不同的进度条；颜色列表的项数应与段数一致；形状用辅助积木选择；使用渐变为真时颜色在段与段之间平滑过渡。

SetSegmentHeight设置段高度(id,高度)

设置进度条中所有段的高度。

SetIndividualSegmentHeight设置单段高度(id,段索引列表,高度列表,对齐方式)

单独设置若干段的高度（v1.4 新增）。段索引列表与高度列表一一对应；段高不同时可用对齐方式下拉选择段在进度条中的位置：bottom 底部对齐、center 居中、top 顶部对齐。

SetSegmentMargin设置段边距(id,边距)

设置段与段之间的间距。

TopBottomMargins设置上下边距(id列表,上边距列表,下边距列表)

设置进度条整体的上下边距（v1.4 新增）。三个列表一一对应，可一次调整多条进度条。

SetSegmentColor设置段颜色(id,段索引列表,颜色列表,使用渐变)

修改指定段的颜色。段索引列表与颜色列表对应；使用渐变为真时颜色平滑过渡。某个段给了多个颜色时，渐变在该段内生成。

SetSegmentCornerRadii设置段圆角(id,左上,右上,右下,左下)

单独设置段的四个圆角半径（按左上、右上、右下、左下的顺序）。

SetTotalProgress设置总进度(id,进度)

设置总进度百分比（0-100），进度按段依次点亮；到 100% 时触发 TotalProgressComplete 事件。

GetTotalProgress获取总进度(id)

获取当前总进度（0-100）。

ResetTotalProgress重置总进度(id)

把总进度重置为 0。

事件

TotalProgressComplete总进度完成时(id)

进度条的总进度达到 100% 时触发，参数为该进度条的 id。

使用技巧

让渐变跨段流动

SetSegmentColor 的渐变默认只作用在单个段内。想让颜色像一条彩带一样跨段流动， 可以给相邻的段组配上首尾共享的颜色，例如（索引按 v1.4 从 1 开始）：

• 段 1～7：只给绿色
• 段 8：给 [绿色, 黄色]
• 段 9：给 [黄色, 红色]

这样绿色到黄色、黄色到红色的过渡正好落在段与段的边界上（原作者在帖内演示的做法）。

注意事项

• 段索引从 1 开始（v1.4 起改为 1 起；2025-03 之前的旧版教程从 0 开始，照抄会错位一位）
• v1.4 移除了 SetSegmentProgressImage（用图片填充进度条）：这个功能拆分到了原作者的另一扩展 ImgProgressBar
• v1.4 去掉了最后一段右侧的边距，整条进度条在布局中居中
• 初始化时颜色列表的项数应与段数一致

版权信息

本文档内容依据原作者发布页面整理翻译，版权归原作者所有。

• 原作者：Joe J. Sánchez（Joejsanz）
• 原始网址：https://community.appinventor.mit.edu/t/progressbar-customizable-segmented-progressbar-height-margin-and-color/122316
• 最新版本发布日期：2025年3月13日（v1.4）