flutter-添加下拉刷新

一.手动添加

参考文章 https://www.jianshu.com/p/f3833677e4ee

下拉刷新

        // 定义 ListView 循环列表项的数量
        num itemCount = 10; 

        // Widget
        RefreshIndicator(
            onRefresh: _onRefresh,//下拉刷新回调
            displacement: 40,    //指示器显示时距顶部位置
            color: Colors.red,   //指示器颜色，默认ThemeData.accentColor
            backgroundColor: Colors.blue,//指示器背景颜色，默认ThemeData.canvasColor
            notificationPredicate: defaultScrollNotificationPredicate, //是否应处理滚动通知的检查（是否通知下拉刷新动作）
            child: ListView.builder(
                itemCount: itemCount,
                itemBuilder: (BuildContext context,int index){
                return Padding(
                    padding: EdgeInsets.all(30),
                    child: Text('${index}'),
                );
                }
            ),
        )
        // _onRefresh 下拉刷新回调
        Future _onRefresh(){
            return Future.delayed(Duration(seconds: 5),(){   // 延迟5s完成刷新
                setState(() {
                    itemCount = 10;
                });
            });
        }

上拉加载更多

    num itemCount = 10;
    ScrollController _controller = new ScrollController();
    @override
     // 初始化State
    void initState(){
        super.initState();
        _controller.addListener(() {
             if (_controller.position.pixels == _controller.position.maxScrollExtent) {
                 _loadMoreData();
             }
        });
    }
    //上拉加载函数
    Future _loadMoreData(){
         // 延迟1s增加数据
        return Future.delayed(Duration(seconds: 1),(){
            if(mounted){
                 setState(() {
                     itemCount += 5;
                 });
            }
        });
    }

   // widget
   ListView.builder(
      itemCount: itemCount,
      controller: _controller,
      itemBuilder: (BuildContext context,int index){
          return Padding(
               padding: EdgeInsets.all(30),
               child: Text('${index}'),
         );
     }
  )

二.第三方框架

PullToRefresh

下拉刷新 上拉加载
PullToRefresh 是一个刷新列表组件，借助于pull_to_refresh库实现，感觉这是目前最好的一款三方刷新库，它的可定制性比较好，刷新样式多样化，已经满足大部分的开发需求。

基本用法

• 添加依赖 pull_to_refresh: ^1.5.6
• ListView包裹一层SmartRefresher

SmartRefresher常用属性说明

• enablePullDown 允许下拉刷新
• enablePullUp 允许上拉加载
• header 下拉刷新头部样式
• footer 上拉加载底部样式
• onRefresh 下拉刷新的回调
• onLoading 上拉加载的回调
• controller 刷新控件的控制器，用来处理回调状态等

国际化显示

需要添加语言本地化SDK，不然刷新库头部与底部显示加载提示内容为英文

添加依赖  flutter_localizations:
              sdk: flutter
                                       
main.dart中MateriaApp里面添加以下内容

localizationsDelegates: [
          // 这行是关键
          RefreshLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalMaterialLocalizations.delegate
        ],
        supportedLocales: [
          const Locale('en'),
          const Locale('zh'),
        ],
        localeResolutionCallback:
            (Locale locale, Iterable supportedLocales) {
          //print("change language");
          return locale;
        },

全局配置

全局配置RefreshConfiguration,配置子树下的所有SmartRefresher表现,一般存放于MaterialApp的根部

RefreshConfiguration(
         headerBuilder: () => WaterDropHeader(),        // 配置默认头部指示器,假如你每个页面的头部指示器都一样的话,你需要设置这个
         footerBuilder:  () => ClassicFooter(),        // 配置默认底部指示器
         headerTriggerDistance: 80.0,        // 头部触发刷新的越界距离
         springDescription:SpringDescription(stiffness: 170, damping: 16, mass: 1.9),         // 自定义回弹动画,三个属性值意义请查询flutter api
         maxOverScrollExtent :100, //头部最大可以拖动的范围,如果发生冲出视图范围区域,请设置这个属性
         maxUnderScrollExtent:0, // 底部最大可以拖动的范围
         enableScrollWhenRefreshCompleted: true, //这个属性不兼容PageView和TabBarView,如果你特别需要TabBarView左右滑动,你需要把它设置为true
         enableLoadingWhenFailed : true, //在加载失败的状态下,用户仍然可以通过手势上拉来触发加载更多
         hideFooterWhenNotFull: false, // Viewport不满一屏时,禁用上拉加载更多功能
         enableBallisticLoad: true, // 可以通过惯性滑动触发加载更多
        child: MaterialApp(
            ........
        )
    );

  @override
  Widget build(BuildContext context) {
    Widget _itemBuilder(BuildContext context, int position) {
      return Card(child: this.datas[position]);
    }

    return Scaffold(
      appBar: AppBar(
        title: Text("Pulltorefresh"),
      ),
      body: SmartRefresher(
        enablePullDown: true,
        enablePullUp: true,
        header: WaterDropHeader(),
        footer: ClassicFooter(
          loadStyle: LoadStyle.ShowAlways,
          completeDuration: Duration(microseconds: 50),
        ),
        onRefresh: _onRefresh,
        onLoading: _onLoading,
        controller: _controller,
        child: ListView.builder(
            itemBuilder: _itemBuilder, itemCount: this.datas.length),
      ),
    );
  }