flutter实现列表下拉刷新上拉加载

在flutter中有一个RefreshIndicator，它是一个下拉刷新的widget，通过它实现列表的下拉刷新

定义RefreshIndicator。并且包裹ListView

        body: RefreshIndicator(
          onRefresh: _handleRefresh,
          child: ListView(
            children: _buildList(),
          ),
        )

当下拉时，触发_handleRefresh方法。 我这里_handleRefresh将定义的list翻转。onRefresh需要返回Future类型

    Future<Null> _handleRefresh() async {
      await Future.delayed(Duration(seconds:2));
      setState(() {
        cityNames = cityNames.reversed.toList();
      });
      return null;
    }

上拉加载更多功能可以借助ScrollController,列表支持设置controller参数，通过ScrollController监听列表滚动的位置，来实现加载更多的功能。

1、定义函数方法ScrollController。并且在启动页面的用initState时候重写。监听页面滚动的距离

    ScrollController _scrollController=new ScrollController();

   @override
    void initState(){
      _scrollController.addListener(() {
        if(_scrollController.position.pixels == _scrollController.position.maxScrollExtent){
          _loadData();
        }
      });
      super.initState();
    }


    @override
    void dispose() {
      _scrollController.dispose();
      super.dispose();
    }

方法如果到达底部就执行_loadData方法._loadData写上复制同样的数组

    _loadData() async{
      await Future.delayed(Duration(milliseconds: 200));
      setState(() {
        List<String>list = List<String>.from(cityNames);
        list.addAll(cityNames);
        cityNames = list;
      });
    }

在ListView的Contro挂载_scrollController控制器

        body: RefreshIndicator(
          onRefresh: _handleRefresh,
          child: ListView(
            controller: _scrollController,
            children: _buildList(),
          ),
        )

完整代码

  import 'package:flutter/material.dart';


  class MyPage extends StatefulWidget {
    @override
    _MyPageState createState() => _MyPageState();
  }

  class _MyPageState extends State<MyPage> {
    List<String> cityNames = ['北京','上海','广西','广东','河南','四川','东莞','北京','上海','广西','广东','河南','四川','东莞','北京','上海','广西','广东','河南','四川','东莞'];

    ScrollController _scrollController=new ScrollController();

   @override
    void initState(){
      _scrollController.addListener(() {
        if(_scrollController.position.pixels == _scrollController.position.maxScrollExtent){
          _loadData();
        }
      });
      super.initState();
    }


    @override
    void dispose() {
      _scrollController.dispose();
      super.dispose();
    }



    @override
    Widget build(BuildContext context) {
      final title = '列表下拉刷新上拉加载';
      return Scaffold(
        body: RefreshIndicator(
          onRefresh: _handleRefresh,
          child: ListView(
            controller: _scrollController,
            children: _buildList(),
          ),
        )
      );
    }

    Future<Null> _handleRefresh() async {
      await Future.delayed(Duration(seconds:2));
      setState(() {
        cityNames = cityNames.reversed.toList();
      });
      return null;
    }

    List<Widget> _buildList() {
      return cityNames.map((city) => _item(city)).toList();
    }

    Widget _item(String city){
      return Container(
        height: 80,
        margin: EdgeInsets.only(bottom: 5),
        alignment: Alignment.center,
        decoration: BoxDecoration(color: Colors.teal),
        child: Text(
          city,
          style: TextStyle(color: Colors.white,fontSize: 20),
        ),
      );
    }

    _loadData() async{
      await Future.delayed(Duration(milliseconds: 200));
      setState(() {
        List<String>list = List<String>.from(cityNames);
        list.addAll(cityNames);
        cityNames = list;
      });
    }
  }