flutter的CircularProgressIndicator基本使用

CircularProgressIndicator

循环进度指示器视图

定义及作用

• 循环进度指示器视图。
• 在页面绘制一个循环进度指示器视图。

参数

const CircularProgressIndicator({
    super.key,
    super.value,
    super.backgroundColor,
    super.color,
    super.valueColor,
    this.strokeWidth = 4.0,//条的宽度
    super.semanticsLabel,//描述CircularProgressIndicator的预期用途
    super.semanticsValue,//为屏幕阅读器提供有关当前进度的信息，给盲人用的，比如设置0.3这个进度时，就会为盲人读30%
})

代码示例

无限循环指示器

CircularProgressIndicator(
    backgroundColor: Colors.blue,
    valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
)

能显示进度的指示器

• 设置了value就会让指示器固定到对应比例的长度

  • 可以用于下载时显示进度，更新value的值并且setstate重绘制即可

    CircularProgressIndicator(
    value: 0.3,
    backgroundColor: Colors.blue,
    valueColor: AlwaysStoppedAnimation(Colors.red),
    )