进度组件ProgressIndicator

上期回顾

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

ProgressIndicator

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

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

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

LinearProgressIndicator

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

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

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

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

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

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

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

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

接下来还是来看下CircularProgressIndicator吧

CircularProgressIndicator

CircularProgressIndicator的构造方法和LinearProgressIndicator类似，只不过多了strokeWidth（边款宽度）

好吧，我们还是直接来看个例子：

还是来看下效果：

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

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

小结

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

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

我怀疑这个是个坏掉的二维码，分享到朋友圈试试？