Material组件库中提供了两种进度指示器:LinearProgressIndicator
和CircularProgressIndicator
,它们都可以同时用于精确的进度指示和模糊的进度指示。精确进度通常用于任务进度可以计算和预估的情况,比如文件下载;而模糊进度则适用于用户任务进度无法准确获得的情况,如下拉刷新、数据提交等。
LinearProgressIndicator
LinearProgressIndicator
是一个线性、条状的进度条,定义如下:
LinearProgressIndicator({
double value,
Color backgroundColor,
Animation<Color> valueColor,
...
})
value
:value
表示当前的进度,取值范围为[0,1];如果value
为null
时则指示器会执行一个循环动画(模糊进度);当value
不为null
时,指示器为一个具体进度的进度条。backgroundColor
:指示器的颜色。valueColor
:指示器的进度条颜色;值得注意的是,该值类型是Animation<Color>
,这说明我们可以对进度条的颜色指定动画。如果我们不需要对进度条颜色执行动画,而只是想对进度条应用一种固定的颜色,那么可以通过AlwaysStoppedAnimation
来指定。
示例
// 模糊进度条(会执行一个动画)
LinearProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: AlwaysStoppedAnimation(Colors.blue),
),
//进度条显示50%
LinearProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: AlwaysStoppedAnimation(Colors.blue),
value: .5,
)
运行效果如下:
第一个进度条在执行循环动画,蓝色条一直在移动;而第二个进度条是静止的,停在50%的位置。
CircularProgressIndicator
CircularProgressIndicator
是一个圆形进度条,定义如下:
CircularProgressIndicator({
double value,
Color backgroundColor,
Animation<Color> valueColor,
this.strokeWidth = 4.0,
...
})
前三个参数和LinearProgressIndicator
相同,不再赘述。strokeWidth
表示圆形进度条的粗细。
示例
// 模糊进度条(会执行一个旋转动画)
CircularProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: AlwaysStoppedAnimation(Colors.blue),
),
//进度条显示50%,会显示一个半圆
CircularProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: AlwaysStoppedAnimation(Colors.blue),
value: .5,
),
运行效果如下:
第一个进度条会执行旋转动画,而第二个进度条是静止的,它停在50%的位置。
自定义尺寸
可以发现除了CircularProgressIndicator
拥有strokeWidth
属性,可以设置圆形进度条的粗细之外,LinearProgressIndicator
和CircularProgressIndicator
,都没有提供设置进度条尺寸的属性,而且LinearProgressIndicator
还没有提供设置进度条粗细的属性。此时,如果我们希望将LinearProgressIndicator
的粗细设细一些,将尺寸设短一点,或者希望将CircularProgressIndicator
的尺寸设大一点,将粗细设粗一点,该怎么办呢?
其实,LinearProgressIndicator
和CircularProgressIndicator
都是取父容器的尺寸作为绘制的边界的。明白了这点,我们便可以通过尺寸限制类Widget,如ConstrainedBox
、SizedBox
来指定尺寸,如:
// 线性进度条宽度指定为260,高度指定为3
SizedBox(
width: 260.0,
height: 3.0,
child: LinearProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colors.blue),
backgroundColor: Colors.grey[200],
value: .6,
),
),
// 圆形进度条直径指定为100,粗细指定为6
SizedBox(
height: 100.0,
width: 100.0,
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colors.blue),
backgroundColor: Colors.grey[200],
value: .7,
strokeWidth: 6,
),
),
运行效果如下:
注意,如果CircularProgressIndicator
显示空间的宽高不同,则会显示为椭圆,如:
// 宽高不等
SizedBox(
height: 100,
width: 130,
child: CircularProgressIndicator(
backgroundColor: Colors.grey[200],
valueColor: AlwaysStoppedAnimation(Colors.blue),
value: .7,
strokeWidth: 6,
),
),
运行效果如下:
进度条颜色动画
前面说过可以通过valueColor
对进度条颜色做动画,关于动画我们将在后续进行讲解,这里先给出一个例子,读者在了解了Flutter动画后再回过头来看看。
实现一个进度条在3秒内从灰色变成蓝色的动画:
import 'package:flutter/material.dart';
class ProgressRoute extends StatefulWidget {
@override
_ProgressRouteState createState() => _ProgressRouteState();
}
class _ProgressRouteState extends State<ProgressRoute>
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.grey[200],
// 3秒内从灰色变成蓝色
valueColor: ColorTween(begin: Colors.grey, end: Colors.blue)
.animate(_animationController),
value: _animationController.value,
),
);
],
),
);
}
}
自定义进度指示器样式
定制进度指示器风格样式,还可以通过CustomPainter
Widget来自定义绘制逻辑,实际上LinearProgressIndicator
和CircularProgressIndicator
也正是通过CustomPainter
来实现外观绘制的。关于CustomPainter
,我们将在后续进行讲解。
flutter_spinkit包提供了多种风格的模糊进度指示器,读者若是感兴趣,可以参考。