Skip to content

Progress 进度条

用于展示操作进度,告知用户当前状态和预期。

实现原理

使用 Stack、Container、LinearProgressIndicator、CircularProgressIndicator 等组件实现进度条的展示效果。

基础用法

使用 percentage 属性来设置进度条的百分比。

查看代码

进度条内显示百分比标识

使用 textInside 属性来在进度条内显示百分比标识。

查看代码

自定义颜色

使用 colorcolorType 属性来自定义进度条的颜色。

查看代码

环形进度条

使用 type 属性来指定使用环形进度条,通过 width 属性来设置其大小。

查看代码

动画进度条

使用 indeterminate 属性来显示动画进度条,通过 duration 属性来控制动画速度。

查看代码

条纹进度条

使用 striped 属性来显示条纹进度条,通过 stripedFlow 属性来使条纹流动起来,使用 duration 属性来控制条纹流动的速度。

查看代码

API

Progress 属性

属性名说明类型默认值
percentage百分比,必填double-
type进度条类型EProgressTypeEProgressType.line
strokeWidth进度条的宽度double6.0
textInside进度条显示文字内置在进度条内(只在 type=line 时可用)booleanfalse
showText是否显示进度条文字内容booleantrue
color进度条背景色Color-
colorType进度条类型EColorTypeEColorType.primary
width环形进度条画布宽度(只在 type=circle 时可用)double126.0
indeterminate是否为动画进度条booleanfalse
duration控制动画速度(秒)double3.0
striped是否显示条纹booleanfalse
stripedFlow条纹是否具有流动效果booleanfalse
customBuilder自定义进度条文字内容Widget Function(double percentage)-

Progress 类型

类型名说明
line线形进度条
circle环形进度条

</rewritten_file>

基于 MIT 协议发布