今天要聊的内容是
Flutter 进度控件: ProgressIndicator 和 刷新控件 RefreshIndicator
首先 我们看下类的结构吧
可见，进度控件的结构很简单，仅仅两个分支而已，那么我们先来介绍外层的这两个
LinearProgressIndicator
结构见图
很简单，需要提一下的是
value：
- 他是设置
当前进度的值，如果设置了，进度就停在设置的位置了，取值范围是0-1，1表示进度已经走完； - 如果没有设置这个
value，那么这个进度控件上的进度条会一直往返刷新
下面再来看下CircleProgressIndicator
CircleProgressIndicator
基本同LinearProgressIndicator类似，不同的是形状，这个是环形
我们来看下二者的示例~
首先定义背景颜色、进度颜色、创建两个进度控件
然后将两个控件排列在一起，展示在视图上
来看一下效果
下面加上value值
看下效果
好，两个简单的进度条咱们就看完了，下面，我们使用RefreshIndicator实现下拉刷新数据
RefreshIndicator
这个控件很像 Android 中的SwipeRefreshLayout
他可以嵌套 ListView 或者其他的控件，完成下拉刷新的效果。
我们先来看下效果图
好，我们开始看看逻辑
一、看下
RefreshIndicator的结构
常用属性
其中 最为重要的是 onRefresh属性
这个属性需要
设置一个返回值为 Future 类型的方法,即表示当刷新时 要处理的逻辑
二、定义
onRefresh属性 需要的方法
这里，我们使用了
Future.delayed(时间,处理逻辑);
来得到一个 Future
除了此方法，还可以使用
这些方法去返回
Future
需要注意还有 setState(){}函数，我们可以在可变的widget中可以使用 setstate(){} 函数，这个是 Flutter 系统定义好的，并不是我们自己创建的方法
三、返回视图
这样，即可实现上方效果图功能。
总结知识点
LinearProgressIndicator
CircularProgressIndicator
RefreshIndicator
onRefresh属性
setState方法
得到 Future 返回值的方法
Bingo，谢谢大家的关注~~
网友评论