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

最新推荐文章于 2025-03-28 09:41:29 发布

星月黎明

最新推荐文章于 2025-03-28 09:41:29 发布

阅读量4.6k

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/qq_33209777/article/details/113525684

版权

针对 Flutter EasyRefresh 插件存在的上拉加载问题进行优化，包括 footer 显示控制和避免重复加载，通过监听 PointerEvent 实现更平滑的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flutter_easyrefresh 加载多次问题修复

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

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

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

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

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

解决方案：加载完成延时一秒将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.gre

最低0.47元/天解锁文章