Flutter 中的Material 组件库中提供了两种进度指示器:LinearProgressIndicatorCircularProgressIndicator

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

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

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

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,
	  ),
	],
  ),
);
复制代码

运行效果:

图片加载失败!

自定义尺寸

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

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

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

我们可以通过尺寸限制类的组件,如ConstrainedBoxSizedBox 来指定尺寸。

代码示例:

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