flutter_pulltorefresh

为 Flutter 滚动组件提供的下拉刷新和小部件上拉加载。

(暂停维护至考研结束12个月后。)

功能

  • Android和iOS均支持
  • 上拉和下拉
  • 几乎适用于所有小部件,如GridView, ListView, Container...
  • 高扩展性,高自由度
  • 强大的弹簧效果

屏幕截图

screen1

screen2

如何使用?

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。

GitHub

https://github.com/peng8350/flutter_pulltorefresh