flutter_pulltorefresh
为 Flutter 滚动组件提供的下拉刷新和小部件上拉加载。
(暂停维护至考研结束12个月后。)
功能
- Android和iOS均支持
- 上拉和下拉
- 几乎适用于所有小部件,如GridView, ListView, Container...
- 高扩展性,高自由度
- 强大的弹簧效果
屏幕截图


如何使用?
1.首先在你的pubspec.yml文件中声明以下内容:
dependencies:
pull_to_refresh: ^1.1.6
2.然后,导入该行。SmartRefresher是包裹在你内容视图外部的组件。
import "package:pull_to_refresh/pull_to_refresh.dart";
....
build() =>
new SmartRefresher(
enablePullDown: true,
enablePullUp: true,
onRefresh: _onRefresh,
onOffsetChange: _onOffsetCallback,
child: new ListView.builder(
itemExtent: 40.0,
itemCount: data.length,
itemBuilder: (context,index){
return data[index];
},
)
)
3.您应该根据不同的刷新模式设置指示器。构建底部指示器也一样。
当然,我构建了一个方便使用的指示器,称为ClassicIndicator。如果这不能满足您的需求,您可以选择自定义一个指示器。
Widget _buildHeader(context,mode){
return new ClassicIndicator(mode: mode);
}
Widget _buildFooter(context,mode){
// the same with header
....
}
new SmartRefresher(
....
footerBuilder: _buildFooter,
headerBuilder: _buildHeader
)
无论是顶部还是底部,当指示器状态为刷新时,onRefresh都会被回调。
但如何将结果告知SmartRefresher呢?很简单。它提供了一个RefreshController,您可以将控制器的构造传递给SmartRefresher,然后调用`SendBack(int status)`来更改成功或失败的状态。
void _onRefresh(bool up){
if(up){
//headerIndicator callback
new Future.delayed(const Duration(milliseconds: 2009))
.then((val) {
_refreshController.sendBack(true, RefreshStatus.failed);
});
}
else{
//footerIndicator Callback
}
}
属性表
SmartRefresher
| 属性名 | 属性说明 | 参数类型 | 默认值 | 必需性 |
|---|---|---|---|---|
| child | 你的内容视图 | ? 扩展自 ScrollView | 空 | 必需 |
| headerBuilder | 顶部指示器 | (BuildContext,int) => Widget | 空 | 如果 `enablePullDown` 为必需,否则可选 |
| footerBuilder | 底部指示器 | (BuildContext,int) => Widget | 空 | 如果 `enablePullUp` 为必需,否则可选 |
| enablePullDown | 下拉开关 | boolean | 真 | 可选 |
| enablePullUp | 上拉开关 | boolean | 假 | 可选 |
| onRefresh | 当一个指示器正在刷新时会回调 | (bool) => Void | 空 | 可选 |
| onOffsetChange | 拖动时回调,以及超出范围 | (bool,double) => Void | 空 | 可选 |
| 控制器 | 控制内部状态 | RefreshController | 空 | 可选 |
| headerConfig | 此设置会影响您使用的指示器类型,`config` 包含很多属性,例如 `triggerDistance`、`completedDuration` 等。 | Config(配置) | RefreshConfig | 可选 |
| footerConfig | 此设置会影响您使用的指示器类型,`config` 包含很多属性,例如 `triggerDistance`、`completedDuration` 等。 | Config(配置) | LoadConfig | 可选 |
| enableOverScroll | 边缘滚动开关。当您使用RefreshIndicator(Material)时,可能需要将其关闭。 | 布尔值 | 真 | 可选 |
RefreshConfig
| 属性名 | 属性说明 | 默认值 |
|---|---|---|
| triggerDistance | 触发刷新的拖动距离 | 100.0 |
| completeDuration | 返回成功和失败时停留的时间 | 800 |
| visibleRange | 指示器可见的范围(刷新状态) | 50.0 |
LoadConfig
| 属性名 | 属性说明 | 默认值 |
|---|---|---|
| triggerDistance | 触发加载的拖动距离 | 5.0 |
| autoLoad | 启用自动加载。如果为false,则 `triggerDistance` 无效。 | 真 |
| bottomWhenBuild | 加载时是否位于listView底部(当您的顶部指示器为LoadConfig时) | 真 |
常见问题
-
是否支持简单的RefreshIndicator (material) + 上拉加载并且无弹性刷新组合?
是的,只要您将节点属性 `enableOverScroll = false`,`enablePullDown = false`,用一个单独的RefreshIndicator包裹在外面即可。另外,
Example4 在demo中提供了一个例子。
-
是否支持不跟随列表的指示器?
我没有将此功能打包到库中,因为即使我进行了封装,
它也只会增加代码的逻辑复杂度,
所以您需要自己使用 `onOffsetChange` 回调方法来实现。
使用Stack进行封装并不难。您可以参考
Example3 或我的项目 flutter_gank 的思路。
-
为什么`child`属性要扩展自`original widget to scrollView`?
由于我的疏忽,我没有考虑到`child`需要缓存item的问题,
因此1.1.3版本已经修正了不缓存的问题。
-
这个库对性能有什么影响?
没有,虽然我没有实际用数据测试性能问题,
但在另一个项目开发过程中,
并没有出现拉出或拉出滑动卡顿的情况。
-
有没有办法实现最大距离限制回弹?
答案是否定的。我知道这必须通过修改 `ScrollPhysics` 来实现,
但我对其中的API不太确定,并且失败了。
如果您有解决此问题的方法,请提交PR。