Flutter练习（七）— 实现列表上滑加载更多下拉刷新

前言

上篇文章介绍了多行文字的展开收起功能，今天我在该列表中实现了上滑加载更多，下拉刷新页面的功能，代码已经放在github上面了，欢迎各位大佬点赞关注

EasyRefresh

首先实现该功能我们就要介绍easyrefresh 插件

特点功能

• 支持绝大多数Widget
• 支持自定义并且已经集成了很多炫酷的 Header 和 Footer
• 支持下拉刷新、上拉加载(可控制触发)
• 支持 Header 和 Footer 列表嵌入以及视图浮动两种形式
• 支持列表事件监听，制作任何样子的 Header 和 Footer，并且能够放在任何位置
• 支持首次刷新，并自定义视图
• 支持自定义列表空视图

EasyRefresh的使用

接下来我们就简单的使用easyrefresh来实现列表的上滑加载更多下拉刷新列表的功能

引入easyrefresh

dependencies:
  flutter_easyrefresh: ^2.2.1

eaysrefresh的用法非常简单

EasyRefresh(
  child: ListView(
    controller: _controller,
    children: buildBoil(),
  ),
  onLoad: () async {
    _load();
  },
  onRefresh: () async {
    _refresh();
  },
)

完整代码如下

import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'package:flutter_application/pages/components/boil_list.dart';
import 'package:flutter_application/pages/components/boil_single.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';

class BoilPage extends StatefulWidget {
  _BoilState createState() => _BoilState();
}

class _BoilState extends State<BoilPage> {
  List<Boil> boilList = [];
  var tempBoilModel = [];

  int _currentPage = 1;
  static const int PAGE_SIZE = 5;
  ScrollController _controller = new ScrollController(); //ListView控制器

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //  数据加载
    _loadData();
  }
  // 
  Future<void> _loadData() async {
    await rootBundle
        .loadString("assets/json/boil.json")
        .then((value) => {tempBoilModel = json.decode(value)});
    _getArticleList();
  }

  void _getArticleList() async {
    // 重构页面
    int lastIndex = _currentPage * PAGE_SIZE > tempBoilModel.length
        ? tempBoilModel.length
        : _currentPage * PAGE_SIZE;
    // _currentPage 为1 时默认为刷新页面。或者刚刷新界面
    if (_currentPage == 1) {
      boilList = [];
    }
    for (int index = (_currentPage - 1) * PAGE_SIZE;
        index < lastIndex;
        index++) {
      var item = tempBoilModel[index];

      Boil boil = new Boil(
          avatar: item['author_user_info']['avatar_large'],
          username: item['author_user_info']['user_name'],
          content: item['msg_Info']['content'],
          hotComment: item['hot_comment']['comment_info']['comment_content'],
          commentCount: item['msg_Info']['comment_count']);
      boilList.add(boil);
    }
    setState(() {
      boilList = boilList;
    });
  }

  void _refresh() async {
    _currentPage = 1;
    _getArticleList();
  }

  void _load() async {
    _currentPage++;
    _getArticleList();
  }

  List<Widget> buildBoil() {
    List<Widget> boils = [];
    boilList.forEach((element) {
      boils.add(new BoilSingle(element));
    });
    return boils;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(12.0),
        child: boilList.length == 0
            ? new Center(
                child: Text('No Data'),
              )
            : EasyRefresh(
                child: ListView(
                  controller: _controller,
                  children: buildBoil(),
                ),
                onLoad: () async {
                  _load();
                },
                onRefresh: () async {
                  _refresh();
                },
              ));
  }
}

class Boil {
  final String avatar;
  final String username;
  final String content;
  final String hotComment;
  final int commentCount;

  Boil(
      {required this.avatar,
      required this.username,
      required this.content,
      required this.hotComment,
      required this.commentCount});
}

效果图如下

上滑加载更多

下拉刷新