Flutter开发者

进度组件ProgressIndicator

2018-04-28

上期回顾

在前面的文章中我们介绍了很多Flutter中的Widget,但是确实还有很多Widget没有介绍到,当然我们会在以后用的时候来做说明的,今天我们就来介绍下Flutter中的进度组件。

ProgressIndicator

在Flutter中ProgressIndicator是个抽象类,它有两个子类。

LinearProgressIndicator和CircularProgressIndicator,分别代表线性进度条和原型进度条,当然两个进度条的应用场景也会有不同,LinearProgressIndicator主要用于明确刻度的进度表示,CircularProgressIndicator主要用于未知刻度的进度表示。

下面我们分别介绍下这两个组件的用法。

LinearProgressIndicator

来啊,还是看下一起来看下构造方法

1
2
3
4
5
6
7

const LinearProgressIndicator({
Key key,
double value,//当前进度0-1之间
Color backgroundColor,//背景颜色
Animation<Color> valueColor,//选中颜色,需要用到动画的知识,以后讲
})

构造方法中并没有什么必填的参数,好吧我们直接写个例子看一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
home: new MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("LinearProgressIndicator"),
),
body:LinearProgressIndicator(),
);
}
}

上面代码我就真的不解释了,直接来看下效果吧

好吧,原来它是自己动的啊,也符合Widget名字的特点,那么我们怎么让它根据我们的值来控制进度的显示呢?

这个时候我们就要用到value属性了,只要我们指定value属性,它就会按照我们的指定的值去绘制。

那么,我们还是再来看下面的例子。

每当我们点击屏幕上按钮时就触发进度的更改(模拟进度回调),当进度最大时从新开始计算进度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
home: new MyApp(),
));
}

class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
double currentProgress = 0.1;

@override
Widget build(BuildContext context) {
onProgressChange() {
setState(() {
currentProgress+=0.1;
if (currentProgress >= 1.0) {
currentProgress = 0.1;
}
});
}

return new Scaffold(

appBar: AppBar(
title: Text("LinearProgressIndicator"),
),
body: Column(
children: <Widget>[
LinearProgressIndicator(
value: currentProgress,
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: RaisedButton(
onPressed: onProgressChange,
child: Text("改变进度"),
),
)
],
),
);
}
}

其实上面的代码很简单,每当我们点击屏幕上按钮时我们就会使currentProgress值+0.1当进度值为1时把它重新置为0.1而已。

接下来还是来看下CircularProgressIndicator吧

CircularProgressIndicator

CircularProgressIndicator的构造方法和LinearProgressIndicator类似,只不过多了strokeWidth(边款宽度)

1
2
3
4
5
6
7
8

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

好吧,我们还是直接来看个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
home: new MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("CircularProgressIndicator"),
),
body:Center(child: CircularProgressIndicator(),),
);
}
}

还是来看下效果:

我们给它新增个属性strokeWidth: 10.0再来看下效果

当然,大家也可以根据根据点击事件来从新设置value的值来达到动态进度的效果,这里就不在具体介绍了。

小结

今天我们一起来看了进度组件ProgressIndicator,LinearProgressIndicator和CircularProgressIndicator,分别代表线性进度条和原型进度条,我们可以根据回调的进度来更新value属性来更新进度。

下节我们借助于ProgressIndicator来看下ListView的下拉刷新与加载更多的实现。

使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

打赏请备注姓名或者昵称,方便我后期统计哦

关注公众号,及时查阅最新文章