5、Flutter 列表下拉刷新实现

实现下拉引用了一个第三方控件：https://github.com/peng8350/flutter_pulltorefresh
主要使用的是SmartRefresher的自定义控件，至于下拉header使用的是其中自定义的RefreshIndicator，由此可以明白，如果想要实现自己的下拉效果，我们只需要重新自定义一个RefreshIndicator就可以了，具体如何来实现这个自定义View，以后自己深入学习的时候在做探讨与分享，目前主要是学习如何使用。

1、三方引用

首先，配置文件pubspec.yaml引入pull_to_refresh

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: ^0.1.2
  dio: ^2.1.0  #latest version
  pull_to_refresh: ^1.3.1 #引入pull_to_refresh

然后，代码中导入

import 'package:pull_to_refresh/pull_to_refresh.dart';

开始使用：

class MessionState extends State<MessionPage>
    with AutomaticKeepAliveClientMixin {
  final AsyncMemoizer _memoizer = AsyncMemoizer();
  RefreshController _refreshController;
  List<Mession> messionList = [];
  @override
  void initState() {
    super.initState();
    _refreshController = RefreshController(); //①声明刷新控制器
  }

  @override
  bool get wantKeepAlive => true;

  _fetchMessionList() {  //初始化获取数据列表
    return _memoizer.runOnce(_fetchList);
  }

  _fetchList() async {  
      ......  //异步耗时操作
    setState(() {
            _refreshController.refreshCompleted(); //下拉结束
          });
      return messionList;
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
     ......
      body: _getList(),
    );
  }

  Widget _getList() { //构建视图
    return Center(
      child: FutureBuilder(
        future: _fetchMessionList(),
        builder: (context, AsyncSnapshot snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.none:
            case ConnectionState.waiting:
              return CircularProgressIndicator();
            default:
              if (snapshot.hasError) {
                return Text('Error:${snapshot.error}');
              } else {
                return _createListView(context, snapshot);
              }
          }
        },
      ),
    );
  }

  Widget _createListView(BuildContext context, AsyncSnapshot snapshot) { //构建下拉
    return SmartRefresher(    //②SmartRefresher使用
      controller: _refreshController, //指定下拉控制器
      enablePullDown: true,  //下拉可用
      isNestWrapped: false,
      header: WaterDropHeader(), //下拉样式
      onRefresh: () { //下拉实现
        _fetchList();
      },
      child: ListView.builder(
          ......
          );
        },
      ),
    );
  }
}

主要明确下拉控件子控件必须是可滑动控件,必须要明白，所要实现下拉效果的控件是谁，然后根据控件使用说明进行属性及相关参数的设置即可。