flutter自带的上拉加载和下拉刷新

    本篇主要记录的是flutter中的RefreshIndicator组件，它的主要作用是用作列表的上拉加载和下拉刷新。该组件的flutter中自带的组件，所以在交互性上，需要我们自己加一些消息的提示，比如上拉加载是要提示‘正在加载’等信息，但本篇不考虑这个，首先是实现它的主要功能，那就是上拉加载和下拉刷新。
    我们先来看下效果图，从图中我们可以看到，当下拉刷新时，会有新的数据‘7’加载出来，在实践的应用中，可以将数据重载，再用setState方法，即可完成页面数据的刷新。当上拉加载时，将有数字‘8’添加到列表的最后，实现加载数据。

    接下来具体的代码实现：

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  //是否正在请求新数据
  bool isLoading = false;

  //加载到listview中的数据list
  List<String> list = new List();  

  //下拉加载的控制器
  ScrollController scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    //数据初始化
    list.add("1");
    list.add("2");
    list.add("3");
    list.add("4");
    list.add("5");
    list.add("6");

    //下拉加载控制器的监听
    scrollController.addListener(() {
      if (scrollController.position.pixels ==
          scrollController.position.maxScrollExtent) {
        print('滑动到了最底部${scrollController.position.pixels}');
        setState(() {
          list.add("8");
        });
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    //手动停止滑动监听
    scrollController.dispose();
  }

   /**
   * 模拟下拉刷新
   */
  Future <void> _onRefresh() async {
    if (isLoading) {
      return;
    }
    setState(() {
       list.add("7");
    });
  }

  @override
  Widget build(BuildContext context) {
    //自适应的第三方引用，详细的自适应，请查阅本人的相关flutter的ScreenUtil自适应，那里会有详细的介绍和应用
    ScreenUtil.instance = ScreenUtil(width: 1080, height: 1920)..init(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: RefreshIndicator(
        onRefresh: _onRefresh,
        child: ListView.builder(
          controller: scrollController,
          itemCount: list.length,
          itemBuilder: (BuildContext context,int position){
            return showList(position);
          },
        ),
      ),
    );
  }

  //显示数据的自定义组件
  Widget showList(int position){
    return Container(
      alignment: Alignment.center,
      padding: EdgeInsets.only(top: ScreenUtil.getInstance().setHeight(50),bottom: ScreenUtil.getInstance().setHeight(50)),
      child: Text(list[position],style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(45)),),
    );
  }
}

    实现上拉加载和下拉刷新，主要靠的时2个方法，一个是在RefreshIndicator组件中onRefresh，另一个是ListView.builder中的controller。onRefresh实现下拉刷新,controller实现上拉加载。