Flutter基础-055-ProgressIndicator进度条

1,382 阅读1分钟

分类:

  • LinearProgressIndicator 横线进度条
  • CircleProgressIndicatorTest 圆形进度条
构造方法
 const LinearProgressIndicator({
    Key key,
    double value,// 当前进度值
    Color backgroundColor,// 背景色
    Animation<Color> valueColor,// 进度色,通常是AlwaysStoppedAnimation(Colors.red[300])来指定
    String semanticsLabel,
    String semanticsValue,
  })
const CircularProgressIndicator({
    Key key,
    double value,
    Color backgroundColor,
    Animation<Color> valueColor,
    this.strokeWidth = 4.0,//宽度
    String semanticsLabel,
    String semanticsValue,
  })
示例

image.png

代码
class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("LinearProgressIndicator"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            LinearProgressIndicator(),
            Container(height: 20,),
            LinearProgressIndicator(
              value: 0.15,
              backgroundColor: Colors.orange[200],
            ),
            Container(height: 20,),
            LinearProgressIndicator(
              backgroundColor: Colors.orange[200],
              valueColor: AlwaysStoppedAnimation(Colors.red[300]),
            ),
            Container(height: 20,),
            CircularProgressIndicator(),
            Container(height: 20,),
            CircularProgressIndicator(
              backgroundColor: Colors.green[200],
              valueColor: AlwaysStoppedAnimation(Colors.red[300]),
            ),
          ],
        ),
      ),
    );
  }
}

关键点:

  • LinearProgressIndicator(),不指定value时,自动走进度
  • 指定value时,0-1.0之间
  • 可以改变背景色和进度色