flutter刷新框架easyrefresh加载出现的bug

其他 2021-11-19 09:43:54 阅读次数: 0

flutter_easyrefresh 加载多次问题修复

flutter_easyrefresh 是一个下拉刷新上拉加载的插件，具体我就不介绍了，这里主要是解决flutter_easyrefresh的bug，主要我在用此插件的时候遇到如下两个问题：

①.上拉加载最后的footer不消失

②.加载少量数据出现多次加载现象解决方案

如下是问题及解决过程，如果想直接看最终解决方案请拉到最后面有最终版本

第一个问题现象如下，就是加载过程中在数据不能占满整个界面的时候footer是不会自动消失的

flutter_easyrefresh 加载多次问题修复_第1张图片

解决方案：加载完成延时一秒将onLoad置为false即可，即footer不会继续显示。

在onLoad的地方添加isFooter用来控制footer是否显示
onLoad: _isFooter
              ? () async {
                  await Future.delayed(Duration(seconds: 0), () {
                    print('onLoad');
                    setState(() {
                      _count += 1;
                    });
                    _controller.finishLoad(noMore: _count >= 10);

                    loadingBottomControl();
                  });
                }
              : null,

下面的逻辑是加载完成一秒后让其不显示
void loadingBottomControl() {
    Future.delayed(Duration(milliseconds: 1000), () {
      setState(() {
        _isFooter = false;
        Future.delayed(Duration(milliseconds: 1000), () {
          setState(() {
            _isFooter = true;
          });
        });
      });
    });
  }

最后别忘了添加变量
bool _isFooter = true;

以上代码即可解决第一个问题，但是当加载较少的数据时会出现多次加载现象，解决方案：

监听当前界面事件，让其在一次点击后只能刷新一次，注意此处不能用GestureDetector，因为GestureDetector只能监听纯单击，不能监听滑动的点击，此处我们用的是Listener，解决方案如下：

bool _isLoad = false;//防止load多次加载

Listener(
          onPointerDown: (p) {
            setState(() {
              _isLoad = true;//设置成true，可以加载
              print("onPointerDown$_isLoad");
            });
          },
          child: EasyRefresh.custom(
            enableControlFinishRefresh: false,
            enableControlFinishLoad: true,
            controller: _controller,
            header: ClassicalHeader(),
            footer: ClassicalFooter(),
            onRefresh: () async {
              await Future.delayed(Duration(seconds: 0), () {
                print('onRefresh');
                setState(() {
                  _count = 1;
                });
                _controller.resetLoadState();
              });
            },
            onLoad: _isFooter
                ? () async {
                    await Future.delayed(Duration(seconds: 0), () {
                      print('onLoad');
                      print("onLoad$_isLoad");
                      if (_isLoad) {
                        _isLoad = false;//设置成false，防止多次加载
                        setState(() {
                          _count += 1;
                        });
                        _controller.finishLoad(noMore: _count >= 10);

                        loadingBottomControl();

                      } else {
                        _controller.finishLoad();
                      }
                    });
                  }
                : null,
            slivers: [
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (context, index) {
                    return Container(
                      width: 60.0,
                      height: 60.0,
                      child: Center(
                        child: Text('$index'),
                      ),
                      color: index % 2 == 0
                          ? Colors.grey[300]
                          : Colors.transparent,
                    );
                  },
                  childCount: _count,
                ),
              ),
            ],
          ),
        )

如上可以解决多次加载问题，但是会出现上拉不放底部加载完成闪烁问题，解决方案如下：

Listener(
          onPointerDown: (p) {
            setState(() {
              _isLoad = true;
              _isFooter = true;//在点击过后才让其显示
              print("onPointerDown$_isLoad");
            });
          },
          child: EasyRefresh.custom(
            enableControlFinishRefresh: false,
            enableControlFinishLoad: true,
            controller: _controller,
            header: ClassicalHeader(),
            footer: ClassicalFooter(),
            onRefresh: () async {
              await Future.delayed(Duration(seconds: 0), () {
                print('onRefresh');
                setState(() {
                  _count = 1;
                });
                _controller.resetLoadState();
              });
            },
            onLoad: _isFooter
                ? () async {
                    await Future.delayed(Duration(seconds: 0), () {
                      print('onLoad');
                      print("onLoad$_isLoad");
                      if (_isLoad) {
                        _isLoad = false;
                        setState(() {
                          _count += 1;
                        });
                        _controller.finishLoad(noMore: _count >= 10);

                        loadingBottomControl();

                      } else {
                        _controller.finishLoad();
                      }
                    });
                  }
                : null,
            slivers: [
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (context, index) {
                    return Container(
                      width: 60.0,
                      height: 60.0,
                      child: Center(
                        child: Text('$index'),
                      ),
                      color: index % 2 == 0
                          ? Colors.grey[300]
                          : Colors.transparent,
                    );
                  },
                  childCount: _count,
                ),
              ),
            ],
          ),
        ));

//此处修改为不显示isFooter
void loadingBottomControl() {
    Future.delayed(Duration(milliseconds: 1000), () {
      setState(() {
        _isFooter = false;
      });
    });
  }

由于上述代码在一秒后就隐藏footer，感觉效果不好，作如下修改：

bool _isFooter = true;//控制footer是否显示
  bool _isLoad = false;//防止load多次加载
  bool _isMove = false;//防止load多次加载
  bool _isAutoClose = false;//是否是一秒后自动关闭footer

Listener(
          onPointerDown: (p) {
            setState(() {
              _isLoad = true;
              _isFooter = true;
              print("onPointerDown$_isLoad");
            });
          },
          onPointerMove: (p){
            setState(() {
              _isMove = true;
            });
          },
          onPointerUp: (p){
            _isMove = false;
            if(!_isAutoClose) {
              setState(() {
                _isAutoClose = true;
                _isFooter = false;
              });
            }
          },
          child: EasyRefresh.custom(
            enableControlFinishRefresh: false,
            enableControlFinishLoad: true,
            controller: _controller,
            header: ClassicalHeader(),
            footer: ClassicalFooter(),
            onRefresh: () async {
              await Future.delayed(Duration(seconds: 0), () {
                print('onRefresh');
                setState(() {
                  _count = 1;
                });
                _controller.resetLoadState();
              });
            },
            onLoad: _isFooter
                ? () async {
                    await Future.delayed(Duration(seconds: 0), () {
                      print('onLoad');
                      print("onLoad$_isLoad");
                      if (_isLoad) {
                        _isLoad = false;
                        setState(() {
                          _count += 1;
                        });
                        _controller.finishLoad(noMore: _count >= 10);

                        loadingBottomControl();

                      } else {
                        _controller.finishLoad();
                      }
                    });
                  }
                : null,
            slivers: [
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (context, index) {
                    return Container(
                      width: 60.0,
                      height: 60.0,
                      child: Center(
                        child: Text('$index'),
                      ),
                      color: index % 2 == 0
                          ? Colors.grey[300]
                          : Colors.transparent,
                    );
                  },
                  childCount: _count,
                ),
              ),
            ],
          ),
        )


void loadingBottomControl() {
    Future.delayed(Duration(milliseconds: 1000), () {
      setState(() {
        if(_isMove) {
          _isAutoClose = false;
        } else {
          _isAutoClose = true;
          _isFooter = false;
        }

      });
    });
  }

最后附上全部代码：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      // App名字
      title: 'EasyRefresh',
      // App主题
      theme: new ThemeData(
        primarySwatch: Colors.orange,
      ),
      // 主页
      home: _Example(),
      localizationsDelegates: [
        GlobalEasyRefreshLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
    );
  }
}

class _Example extends StatefulWidget {
  @override
  _ExampleState createState() {
    return _ExampleState();
  }
}

class _ExampleState extends State<_Example> {
  EasyRefreshController _controller;

  // 条目总数
  int _count = 1;

  bool _isFooter = true;//控制footer是否显示
  bool _isLoad = false;//防止load多次加载
  bool _isMove = false;//防止load多次加载
  bool _isAutoClose = false;//是否是一秒后自动关闭footer

  @override
  void initState() {
    super.initState();
    _controller = EasyRefreshController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("EasyRefresh"),
        ),
        body: Listener(
          onPointerDown: (p) {
            setState(() {
              _isLoad = true;
              _isFooter = true;
              print("onPointerDown$_isLoad");
            });
          },
          onPointerMove: (p){
            setState(() {
              _isMove = true;
            });
          },
          onPointerUp: (p){
            _isMove = false;
            if(!_isAutoClose) {
              setState(() {
                _isAutoClose = true;
                _isFooter = false;
              });
            }
          },
          child: EasyRefresh.custom(
            enableControlFinishRefresh: false,
            enableControlFinishLoad: true,
            controller: _controller,
            header: ClassicalHeader(),
            footer: ClassicalFooter(),
            onRefresh: () async {
              await Future.delayed(Duration(seconds: 0), () {
                print('onRefresh');
                setState(() {
                  _count = 1;
                });
                _controller.resetLoadState();
              });
            },
            onLoad: _isFooter
                ? () async {
                    await Future.delayed(Duration(seconds: 0), () {
                      print('onLoad');
                      print("onLoad$_isLoad");
                      if (_isLoad) {
                        _isLoad = false;
                        setState(() {
                          _count += 1;
                        });
                        _controller.finishLoad(noMore: _count >= 10);

                        loadingBottomControl();

                      } else {
                        _controller.finishLoad();
                      }
                    });
                  }
                : null,
            slivers: [
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (context, index) {
                    return Container(
                      width: 60.0,
                      height: 60.0,
                      child: Center(
                        child: Text('$index'),
                      ),
                      color: index % 2 == 0
                          ? Colors.grey[300]
                          : Colors.transparent,
                    );
                  },
                  childCount: _count,
                ),
              ),
            ],
          ),
        ));
  }

  void loadingBottomControl() {
    Future.delayed(Duration(milliseconds: 1000), () {
      setState(() {
        if(_isMove) {
          _isAutoClose = false;
        } else {
          _isAutoClose = true;
          _isFooter = false;
        }

      });
    });
  }
}

上面的代码是嵌套到界面内部的，下面是直接包装到EasyRefresh中，直接调用即可：

以下是最终版本！！！其中用到了高级函数和扩展函数特性，需要flutter dev分支或者flutter master分支并且dart版本是2.6以上，以后可能会放到flutter stable分支中，当下测试还是不能使用在stable分支和beta分支中，如果不想用master或者dev版本只能用上面的方案了！

import 'package:flutter/widgets.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';

//此处是将包装方法封装到EasyRefresh 中
extension SmartRefresh on EasyRefresh {
  static bool _isFooter = true; //控制footer是否显示
  static bool _isLoad = false; //防止load多次加载
  static bool _isMove = false; //防止load多次加载
  static bool _isAutoClose = false; //是否是一秒后自动关闭footer

  Listener buildSmartRefresh(State state) {
    return Listener(
      onPointerDown: (p) {
        state.setState(() {
          _isLoad = true;
          _isFooter = true;
          print("onPointerDown$_isLoad");
        });
      },
      onPointerMove: (p) {
        state.setState(() {
          _isMove = true;
        });
      },
      onPointerUp: (p) {
        _isMove = false;
        if (!_isAutoClose) {
          state.setState(() {
            _isAutoClose = true;
            _isFooter = false;
          });
        }
      },
      child: this,
    );
  }

  Function onSmartRefreshCallback(onRefresh,EasyRefreshController controller) {
    return () async {
      await Future.delayed(Duration(seconds: 0), () {
        onRefresh();
        controller.resetLoadState();
      });
    };
  }

  Function onSmartLoadCallback(onLoad,state,EasyRefreshController controller) {
    return _isFooter
        ? () async {
      await Future.delayed(Duration(seconds: 0), () {
        print('onLoad');
        print("onLoad$_isLoad");
        if (_isLoad) {
          _isLoad = false;
          onLoad();
          loadingBottomControl(state);
        } else {
          controller.finishLoad();
        }
      });
    }
        : null;
  }

  void loadingBottomControl(State state) {
    Future.delayed(Duration(milliseconds: 1000), () {
      state.setState(() {
        if(_isMove) {
          _isAutoClose = false;
        } else {
          _isAutoClose = true;
          _isFooter = false;
        }

      });
    });
  }
}

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

import 'SmartRefresh.dart';

void main() => runApp(MyApp());

//调用EasyRefresh示例
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      // App名字
      title: 'EasyRefresh',
      // App主题
      theme: new ThemeData(
        primarySwatch: Colors.orange,
      ),
      // 主页
      home: _Example(),
      localizationsDelegates: [
        GlobalEasyRefreshLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
    );
  }
}

class _Example extends StatefulWidget {
  @override
  _ExampleState createState() {
    return _ExampleState();
  }
}

class _ExampleState extends State<_Example> {
  EasyRefreshController _controller;

  // 条目总数
  int _count = 1;

  @override
  void initState() {
    super.initState();
    _controller = EasyRefreshController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("EasyRefresh"),
        ),
        body: _easyRefreshState().buildSmartRefresh(this));
  }

  EasyRefresh _easyRefreshState(){
    EasyRefresh refresh = EasyRefresh();
    refresh =  EasyRefresh.custom(
      enableControlFinishRefresh: false,
      enableControlFinishLoad: true,
      controller: _controller,
      header: ClassicalHeader(),
      footer: ClassicalFooter(),
      onRefresh: refresh.onSmartRefreshCallback(onRefresh,_controller),
      onLoad: refresh.onSmartLoadCallback(onLoad, this,_controller),
      slivers: [
        SliverList(
          delegate: SliverChildBuilderDelegate(
                (context, index) {
              return Container(
                width: 60.0,
                height: 60.0,
                child: Center(
                  child: Text('$index'),
                ),
                color: index % 2 == 0
                    ? Colors.grey[300]
                    : Colors.transparent,
              );
            },
            childCount: _count,
          ),
        ),
      ],
    );
    return refresh;
  }

  void onRefresh() {
    setState(() {
      _count = 1;
    });
  }

  void onLoad() {
    setState(() {
      _count += 1;
    });
    _controller.finishLoad(noMore: _count >= 10);
  }

}

github源码地址：

https://github.com/gonglipeng/SmartRefresh.git

猜你喜欢

转载自blog.csdn.net/qq_33209777/article/details/113525684
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022