App Inventor 2 CirculBar 扩展：在图像组件上绘制自定义圆形进度条

• CirculBar 扩展：自定义圆形进度条
• 方法
• 使用方法
• 使用案例
  • 文件下载进度
• 拓展下载
• 版权信息

« 返回首页

CirculBar 扩展：自定义圆形进度条

CirculBar 扩展可以创建自定义的圆形进度条，在 Image（图像）组件上绘制带有百分比文字的圆形进度显示。

运行效果如下：

方法

CircularImageBar绘制圆形进度条(图像组件,进度值,文字颜色,进度条颜色,线条宽度,字体大小,背景颜色)

在指定的 Image（图像）组件上绘制一个圆形进度条。

参数说明：

参数	类型	说明
图像组件	component	要绘制圆形进度条的 Image 组件
进度值	number	进度百分比值，如 50 表示 50%
文字颜色	color	中间百分比文字的颜色，支持颜色名称（如 red、white）或 16 进制值（如 #ed1414f3）
进度条颜色	color	圆形进度条弧线的颜色
线条宽度	number	进度条弧线的宽度（设为 0 则不显示进度弧线）
字体大小	number	中间百分比文字的字体大小
背景颜色	color	圆形进度条的背景颜色

示例： 下面的代码展示了 5 种不同样式的圆形进度条效果。

使用方法

1. 在设计器中添加一个或多个 Image（图像）组件到屏幕上
2. 添加 CirculBar 扩展
3. 在 Screen.Initialize（初始化）事件中调用 CircularImageBar绘制圆形进度条 方法
4. 传入 Image 组件和所需的颜色、进度值等参数

测试代码块如下：

使用案例

文件下载进度

在屏幕中添加 图像1 和 CircleProgressBar 扩展，用按钮模拟一次进度更新：

when Screen1.Initialize() {
  CircleProgressBar1.CircularImageBar(图像1, 0, "white", "#2196F3", 12, 36, "transparent")
}

when 按钮_更新.Click() {
  CircleProgressBar1.CircularImageBar(图像1, 滑动条1.ThumbPosition, "white", "#2196F3", 12, 36, "transparent")
}

when 按钮_完成.Click() {
  CircleProgressBar1.CircularImageBar(图像1, 100, "white", "#4CAF50", 12, 36, "transparent")
  图像1.Visible = false
  标签_状态.Text = "下载完成"
}

线条宽度、字体大小和颜色可以根据页面主题调整。

拓展下载

• .aix 拓展下载：

com.varsha.CirculBar.aix

版权信息

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

• 原作者：varsha
• 原始网址：https://community.kodular.io/t/here-is-my-7th-free-extension-circle-progress-bar/83714