《Flutter 控件大全》第七十一：LinearProgressIndicator、CircularProgressIndicator、RefreshProgressIndicator

• 如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。
• 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。
• Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。

LinearProgressIndicator

水平进度指示器，基本用法如下：

LinearProgressIndicator()

效果如下：

设置具体进度值：

LinearProgressIndicator(
  value: 0.3,
)

value的值范围是0-1，效果如下：

设置背景颜色及进度值：

LinearProgressIndicator(
  value: 0.3,
  backgroundColor: Colors.greenAccent,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
)

效果如下：

CircularProgressIndicator

CircularProgressIndicator 是圆形进度条，和LinearProgressIndicator用法一样：

CircularProgressIndicator()

效果如下：

设置进度值及颜色值：

CircularProgressIndicator(
  value: 0.3,
  backgroundColor: Colors.greenAccent,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
)

效果如下：

CupertinoActivityIndicator

CupertinoActivityIndicator是ios风格的指示器，CupertinoActivityIndicator不能设置进度，只能一直转“菊花”。

CupertinoActivityIndicator(
  radius: 10,
)

radius参数是半径，值越大，控件越大。

效果如下：

RefreshProgressIndicator

RefreshProgressIndicator 是刷新指示器，通常用于下拉刷新，基本用法如下：

RefreshProgressIndicator()

效果如下：

设置宽度及颜色：

RefreshProgressIndicator(
  backgroundColor: Colors.greenAccent,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
  strokeWidth: 5.0,
)

效果如下：

查看专栏详情 立即解锁全部专栏