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源代码持续更新中