Flutter(31):Material组件之LinearProgressIndicator/CircularProgressIndicator

Flutter教学目录持续更新中

Github源代码持续更新中

1.ProgressIndicator介绍

  • LinearProgressIndicator:一个线性进度条
  • CircularProgressIndicator:一个圆形进度条

2.LinearProgressIndicator属性

  • value:progress 0~1/null
  • backgroundColor:进度条底色
  • valueColor:Animation 进度条颜色 AlwaysStoppedAnimation(Colors.amber)

3.CircularProgressIndicator属性

  • value:progress 0~1/null
  • backgroundColor:进度条底色
  • valueColor:Animation 进度条颜色 AlwaysStoppedAnimation(Colors.amber)
  • strokeWidth = 4.0:宽度

4.使用注意

  • LinearProgressIndicator与CircularProgressIndicator自身都不具备设置宽高,都是撑满父节点,所以我们可以用一些可以设置宽高的widget做他的父节点,例如Container
  • value:progress 设置null是有一个酷炫效果的

5.LinearProgressIndicator

value: null.png
value: 0.4.png
 _myLinearProgressIndicator() {
   return LinearProgressIndicator(
     value: null,
     // value: 0.4,
     backgroundColor: Colors.amber.shade100,
     valueColor: AlwaysStoppedAnimation(Colors.amber),
   );
 }

Container(
  margin: EdgeInsets.all(20),
  height: 10,
  child: _myLinearProgressIndicator(),
),

6.CircularProgressIndicator

value: null.png
value: 0.4.png
_myCircularProgressIndicator() {
  return CircularProgressIndicator(
    // value: null,
    value: 0.4,
    backgroundColor: Colors.amber.shade100,
    valueColor: AlwaysStoppedAnimation(Colors.amber),
    strokeWidth: 10,
  );
}

Container(
  margin: EdgeInsets.all(20),
  width: 200,
  height: 200,
  child: _myCircularProgressIndicator(),
),

下一节:Material组件之Chip

Flutter(32):Material组件之Chip

Flutter教学目录持续更新中

Github源代码持续更新中

你可能感兴趣的:(Flutter(31):Material组件之LinearProgressIndicator/CircularProgressIndicator)