欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

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

LinearProgressIndicator

水平进度指示器,基本用法如下:

LinearProgressIndicator()

效果如下:

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

设置具体进度值:

LinearProgressIndicator(
  value: 0.3,
)

value的值范围是0-1,效果如下:

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

设置背景颜色及进度值:

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

效果如下:

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

CircularProgressIndicator

CircularProgressIndicator 是圆形进度条,和LinearProgressIndicator用法一样:

CircularProgressIndicator()

效果如下:

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

设置进度值及颜色值:

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

效果如下:

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

CupertinoActivityIndicator

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

CupertinoActivityIndicator(
  radius: 10,
)

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

效果如下:

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

RefreshProgressIndicator

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

RefreshProgressIndicator()

效果如下:

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

设置宽度及颜色:

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

效果如下:

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

相关标签: # Flutter Widgets