flutter 上拉刷新下拉加载

2,253 阅读1分钟
// 使用需要初始化 RefreshController
RefreshController _refreshController = RefreshController(initialRefresh: false);
  List list = [1, 2, 3, 4, 5, 6, 7];  // 本地模拟数据,真实环境可以是网络请求的

  // 下拉刷新
  void _onRefresh() async {
    try { // 模拟网络请求数据
      // 延时一秒加载成功
      await Future.delayed(Duration(seconds: 1));
      list.insert(0, list[0] - 1);
      _refreshController.refreshCompleted(); // 刷新成功
      setState(() {});
    } catch (e) {
      _refreshController.refreshFailed(); // 刷新失败
    }
  }

  // 上拉加载
  void _onLoading() async {
    try {
      await Future.delayed(Duration(seconds: 1));
      _refreshController.loadComplete(); // 刷新成功
      var num = list.last + 1;
      if (num == 10) {
        _refreshController.loadFailed();
      } else {
        list.add(num);
        _refreshController.loadComplete(); // 刷新成功
      }
      setState(() {});
    } catch (e) {
      _refreshController.loadComplete(); // 刷新失败
    }
  }

  @override
  Widget build(BuildContext context) {
    return SmartRefresher(
      enablePullUp: true, // 是否开启上拉刷新
      enablePullDown: true, // 是否开启下拉加载
      header: CustomHeader( // 自定义下拉刷新
      // header中可以支持其他几种刷新模式,需要请看该插件github实例
        builder: (BuildContext context, RefreshStatus mode) {
          Widget body;
          // 指示器中的状态
          if (mode == RefreshStatus.idle) {
            body = Text('下拉刷新');
          } else if (mode == RefreshStatus.refreshing) {
            body = Text('刷新中...');
          } else if (mode == RefreshStatus.completed) {
            body = Text('刷新成功');
          } else if (mode == RefreshStatus.failed) {
            body = Text('刷新失败');
          } else if (mode == RefreshStatus.canRefresh) {
            body = Text('松开刷新');
          }
          return Center(
            child: body,
          );
        },
      ), 
      footer: ClassicFooter(),  // 默认的一种加载方式
      controller: _refreshController, // 必须要配置
      onRefresh: _onRefresh,
      onLoading: _onLoading,
      child: ListView.builder(
        itemCount: list.length,
        itemExtent: 100,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            child: Center(
              child: Text('${list[index]}'),
            ),
          );
        },
      ),
    );
  }