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 组件和所需的颜色、进度值等参数

测试代码块如下：

拓展下载

• .aix 拓展下载：

com.varsha.CirculBar.aix

本文档翻译整理自 Kodular 社区帖子，版权归原作者 varsha 所有。原始链接：https://community.kodular.io/t/here-is-my-7th-free-extension-circle-progress-bar/83714