Flutter 利用SmartRefresher实现下拉刷新和上拉加载功能

废话开篇：iOS下的 MJRefresh 作为原生开发的朋友肯定再熟悉不过了，利用UIScrollView 的偏移量来触发相应的加载事件。下面简单记录一下flutter 第三方 SmartRefresher 实现类似的加载过程。

步骤一、配置第三方依赖。

打开 flutter 下的 pubspec.yaml 文件，这里在依赖选项中去配置第三方依赖库。

tip: 该文件还可以配置自定义字体、image本地图片。

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  //刷新依赖库
  pull_to_refresh: ^1.5.6
复制代码

打开终端输入执行命令： flutter packages get

如果提示 flutter not found 那么说明当前终端环境下flutter 并没有配置环境变量。

声明一下环境变量，红线处填写搭建环境 flutter SDK 保存的路径

 export PATH=/(你的SDK路)/flutter/bin:$PATH
复制代码

好了，再次运行一下 flutter packages get 去安装依赖。

这时候去编译一下当前的app，如果出现 Cannot run with sound null safety, because the following dependencies 。。。错误，在androidStudio 配置下忽略此项。

--no-sound-null-safety
复制代码

问题二、怎么用？

导入第三方依赖

import 'package:pull_to_refresh/pull_to_refresh.dart';
复制代码

builder 里使用 SmartRefresher 组件

//加载状态控制器
RefreshController _refreshController = new RefreshController();
复制代码

@override
Widget build(BuildContext context) {
  
  return new Container(
    child: MediaQuery.removePadding(
        context: context,
        removeTop: true,
        removeBottom: false,
        child: new Scrollbar(
            //刷新组件包裹 ListView.builder
            child: new SmartRefresher(
                //允许下拉刷新
                enablePullDown: true,
                //允许上拉加载
                enablePullUp: true,
                //默认下拉样式
                header: WaterDropHeader(),
                //自定义上拉样式
                footer: CustomFooter(
                  builder: (BuildContext context, LoadStatus mode) {
                    Widget body;
                    if (mode == LoadStatus.idle) {
                      //闲置状态
                      body = Text("上拉加载更多");
                    } else if (mode == LoadStatus.loading) {
                      //加载状态
                      body = Text("正在努力加载中...");
                    } else if (mode == LoadStatus.failed) {
                      //加载数据失败
                      body = Text("加载失败，稍后重试");
                    } else {
                      //没有数据
                      body = Text("没有更多数据了");
                    }
                    return Container(
                      height: 55.0,
                      child: Center(child: body),
                    );
                  },
                ),
                controller: _refreshController,
                //列表组件
                child: ListView.builder(
                  itemBuilder: _buildListItem,
                  itemCount:_totalItems,
                  physics: AlwaysScrollableScrollPhysics(),
                ),
                onRefresh: _onRefresh,
                onLoading: _onLoading
            )
        )
    ),
  );
}
复制代码

对于刷新状态有多项选择

对于加载状态有多项选择

完整代码


//模拟刷新网络加载事件
Future<void> _onRefresh(){
  return Future.delayed(Duration(seconds: 2),(){
    // 延迟2s完成刷新
    setState(() {
      _refreshController.refreshCompleted();
    });
  });
}

//模拟加载网络加载事件
Future<void> _onLoading(){
  return Future.delayed(Duration(seconds: 2),(){
    // 延迟2s完成刷新
    setState(() {
      _totalItems += 9;
      _refreshController.loadComplete();
    });
  });
}
复制代码

屏幕录制2021-07-29 下午5.05.14.gif

对于ListView 里面的builder 绘制item方法这里就不做过多叙述，主要是代码拙劣[抱拳][抱拳][抱拳]

文章水平有限，大神勿喷，主要是希望跟大家分享共同进步。对大家如果有帮助，更是深感欣慰。[抱拳][抱拳][抱拳]

Flutter 利用SmartRefresher实现下拉刷新和上拉加载功能

猜你喜欢