《Flutter 控件大全》第七十一:LinearProgressIndicator、CircularProgressIndicator、RefreshProgressIndicator
程序员文章站
2022-03-11 11:00:25
...
- 如果你对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,
)
效果如下: