文章已同步至掘金：https://juejin.cn/post/6844903957228158984
欢迎访问😃，有任何问题都可留言评论哦~

Flutter 中的Material 组件库中提供了两种进度指示器：LinearProgressIndicator和CircularProgressIndicator。

它们都可以同时用于精确的进度指示和模糊的进度指示，只不过进度条一个是线形的，一个是圆形的。

• 精确进度通常用于任务进度可以计算和预估的情况，比如：文件下载；

• 模糊进度则用户任务进度无法准确获得的情况，如下拉刷新，数据提交等。

LinearProgressIndicator

LinearProgressIndicator是一个线性、条状的进度条，

源码示例

构造函数如下：

const LinearProgressIndicator({
	Key key,
	double value,
	Color backgroundColor,
	Animation<Color> valueColor,
	String semanticsLabel,
	String semanticsValue,
})

属性解释

value(重要)

用于指定进度条是精确的，还是模糊的

如果LinearProgressIndicator里没有写value，那么就是模糊的，反之就是精确的

你可以在外面定义一个值，然后在value中使用这个值，用来显示当前进度的完成情况

backgroundColor、valueColor

backgroundColor是进度条的背景颜色
valueColor是进度条的颜色

代码示例：

Center(
  child: Column(
	children: <Widget>[
	  SizedBox(
		height: 20,
	  ),
	  // 模糊进度条(会执行一个动画)
	  LinearProgressIndicator(
		backgroundColor: Colors.grey[200],  //进度条的背景颜色
		valueColor: AlwaysStoppedAnimation(Colors.blue),  //进度条的颜色
	  ),
	  SizedBox(
		height: 20,
	  ),
	  //进度条显示50%
	  LinearProgressIndicator(
		backgroundColor: Colors.grey[200],
		valueColor: AlwaysStoppedAnimation(Colors.blue),
		value: .5,
	  )
	],
  ),
);

运行效果：

CircularProgressIndicator

CircularProgressIndicator是一个圆形进度条

源码示例

构造函数如下：

const CircularProgressIndicator({
	Key key,
	double value,
	Color backgroundColor,
	Animation<Color> valueColor,
	this.strokeWidth = 4.0,
	String semanticsLabel,
	String semanticsValue,
}) 

属性解释

这里面的属性和LinearProgressIndicator的属性一样，而且效果也一样，只多了一个strokeWidth

strokeWidth

他是用于绘制圆的线条宽度。默认宽度是4

代码示例：

Center(
  child: Column(
	children: <Widget>[
	  SizedBox(
		height: 20,
	  ),
	  // 模糊进度条(会执行一个旋转动画)
	  CircularProgressIndicator(
		backgroundColor: Colors.grey[200],
		valueColor: AlwaysStoppedAnimation(Colors.blue),
		strokeWidth: 15,	//线条宽度15
	  ),
	  SizedBox(
		height: 20,
	  ),
	  //进度条显示50%，会显示一个半圆
	  CircularProgressIndicator(
		backgroundColor: Colors.grey[200],
		valueColor: AlwaysStoppedAnimation(Colors.blue),
		value: .5,
	  ),
	],
  ),
);

运行效果：

自定义尺寸

通过上面的源码和例子，我们可以发现LinearProgressIndicator和CircularProgressIndicator并没有提供设置进度条尺寸的参数；

如果我们希望LinearProgressIndicator的线细一些，或者希望CircularProgressIndicator的圆大一些该怎么做？

其实LinearProgressIndicator和CircularProgressIndicator都是取父容器的尺寸作为绘制的边界的。

我们可以通过尺寸限制类的组件，如ConstrainedBox、SizedBox 来指定尺寸。

代码示例：

Column(
  children: <Widget>[
	SizedBox(
	  height: 50,
	),
	// 线性进度条高度指定为3
	SizedBox(
	  height: 3,
	  child: LinearProgressIndicator(
		backgroundColor: Colors.grey[200],
		valueColor: AlwaysStoppedAnimation(Colors.blue),
		value: .5,
	  ),
	),
	SizedBox(
	  height: 50,
	),
	// 圆形进度条直径指定为100
	SizedBox(
	  height: 100,
	  width: 100,
	  child: CircularProgressIndicator(
		backgroundColor: Colors.grey[200],
		valueColor: AlwaysStoppedAnimation(Colors.blue),
		value: .7,
	  ),
	),
  ],
);

运行效果：

注：如果CircularProgressIndicator显示空间的宽高不同，则会显示为椭圆

代码示例：

SizedBox(
  //这里面设置的宽高不一样
  height: 100,
  width: 150,
  child: CircularProgressIndicator(
	backgroundColor: Colors.grey[200],
	valueColor: AlwaysStoppedAnimation(Colors.blue),
	value: .7,
  ),
), 

运行效果：

进度色动画

前面说过可以通过valueColor对进度条颜色做动画，关于动画这里就先不详细说了

给出一个例子先看一下：

实现一个进度条在3秒内从红色变成蓝色的动画：

import 'package:flutter/material.dart';

class CategoryPage extends StatefulWidget {
  @override
  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    //动画执行时间3秒
    _animationController =
        new AnimationController(vsync: this, duration: Duration(seconds: 3));
    _animationController.forward();
    _animationController.addListener(() => setState(() => {}));
    super.initState();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(16),
            child: LinearProgressIndicator(
              backgroundColor: Colors.red,
              valueColor: ColorTween(begin: Colors.red, end: Colors.blue)
                  .animate(_animationController), // 从红色变成蓝色
              value: _animationController.value,
            ),
          ),
        ],
      ),
    );
  }
}

---

W_W