App Inventor 2 SemiCircleArc 扩展：高级自定义半圆进度条

• SemiCircleArc 扩展：高级自定义半圆进度条
  • 规格
• 运行效果
• 事件
• 方法
• 属性
• 代码块
• 使用案例
  • 分步加载进度
• 拓展下载
• 版权信息

« 返回首页

SemiCircleArc 扩展：高级自定义半圆进度条

SemiCircleArc 是一个适用于 App Inventor 2 的高级自定义半圆进度条扩展。

特性：

• 平滑动画：平滑地动画化进度变化。
• 自定义渐变：支持进度条、占位条和背景的渐变色。
• 双文本支持：同时显示百分比和自定义标签文字（例如”加载中…“）。
• 自定义字体：从素材或存储加载自定义字体（TTF/OTF）。
• 完全自定义：控制所有元素的颜色、大小、宽度和内边距。

由 TechHamara 使用 FAST 开发。

规格

运行效果

事件

AnimationFinished动画完成时()

当进度动画播放完成时触发该事件。

ProgressChanged进度改变时(百分比)

当进度值发生变化时触发该事件。参数 百分比 返回当前进度百分比值。

方法

Initialize初始化(布局容器)

在指定布局中初始化半圆进度条。传入一个布局组件（如 HorizontalArrangement）作为容器。

PercentWithAnimation带动画设置百分比(百分比)

以动画方式设置进度百分比。

ProgressBarGradient进度条渐变色(起始颜色,结束颜色)

设置进度条的渐变颜色。参数为起始颜色和结束颜色的数值。

ProgressPlaceHolderGradient占位条渐变色(起始颜色,结束颜色)

设置进度占位条的渐变颜色。参数为起始颜色和结束颜色的数值。

BackgroundGradient背景渐变色(起始颜色,结束颜色)

设置背景的渐变颜色。参数为起始颜色和结束颜色的数值。

ResetFont重置字体()

将字体重置为默认的 Sans Serif 字体。

属性

BackgroundColor背景颜色

设置半圆进度条的背景颜色。

ProgressBarColor进度条颜色

设置进度条的颜色。

ProgressBarWidth进度条宽度

设置进度条的宽度。

ProgressPlaceHolderColor占位条颜色

设置进度占位条的颜色。

ProgressPlaceHolderWidth占位条宽度

设置进度占位条的宽度。

Percent百分比

设置当前进度百分比。

ShowProgressText显示百分比文字

设置是否显示百分比文字。为 真 时显示，为 假 时隐藏。

ProgressTextColor百分比文字颜色

设置百分比文字的颜色。

ProgressTextSize百分比文字大小

设置百分比文字的大小。

ProgressTextPaddingTop百分比文字上内边距

设置百分比文字的顶部内边距。

ProgressTextPaddingBottom百分比文字下内边距

设置百分比文字的底部内边距。

LabelText标签文字

设置标签文字内容（例如”加载中…“）。

LabelColor标签颜色

设置标签文字的颜色。

LabelSize标签大小

设置标签文字的大小。

LabelPaddingTop标签上内边距

设置标签文字的顶部内边距。

LabelPaddingBottom标签下内边距

设置标签文字的底部内边距。

CustomFont自定义字体

设置自定义字体。可在设计器中选择素材中的字体文件（TTF/OTF），或通过代码设置字体文件路径。

代码块

测试代码块如下：

使用案例

分步加载进度

下面的积木创建一个带文字和渐变色的加载进度条，并在进度变化时更新页面提示：

when Screen1.Initialize() {
  SemiCircleArc1.Initialize(垂直布局_进度)
  SemiCircleArc1.ShowProgressText = true
  SemiCircleArc1.LabelText = "加载中"
  SemiCircleArc1.ProgressBarGradient(&HFF42A5F5, &HFF7E57C2)
  SemiCircleArc1.BackgroundGradient(&HFFE0E0E0, &HFFF5F5F5)
  SemiCircleArc1.PercentWithAnimation(30)
}

when 按钮_继续.Click() {
  SemiCircleArc1.PercentWithAnimation(80)
}

when SemiCircleArc1.ProgressChanged(percent) {
  标签_状态.Text = join("进度：", percent, "%")
}

when SemiCircleArc1.AnimationFinished() {
  SemiCircleArc1.LabelText = "加载完成"
}

可以使用 ProgressBarGradient 和 BackgroundGradient 设置主题色，示例积木和下载的 semi_arc.aia 已包含完整的基础布局。

拓展下载

• .aix 拓展下载：

io.th.semicirclearc.aix

• demo 下载：

semi_arc.aia

版权信息

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

• 原作者：Tech Hamara
• 原始网址：https://community.appinventor.mit.edu/t/free-semicirclearc-an-advanced-customizable-semi-circle-progress-bar-extension/163873