列表下拉刷新与上拉加载更多功能实现

一、如何实现列表下拉刷新？

在Flutter中有一个RefreshIndicator,它是一个下拉刷新的widget,通过它我们可以实现列表的下拉刷新

列表下拉刷新与上拉加载更多功能实现

二、添加下拉刷新的代码

列表下拉刷新与上拉加载更多功能实现

刷新过程中

列表下拉刷新与上拉加载更多功能实现

刷新完成后数据发生了变化，第一条数据由北京变成了拉萨，完成了对数据的处理

列表下拉刷新与上拉加载更多功能实现

三、如何实现上拉加载更多？

为了给列表添加拉加载更多的功能，我们可以借助ScrollController，列表支持设置controller参数，通过ScrollController监听列表滚动的位置，来实现加载更多的功能

列表下拉刷新与上拉加载更多功能实现

当移动到底部后会重新加载更多的数据

列表下拉刷新与上拉加载更多功能实现

四、代码：


import 'package:flutter/material.dart';


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


class MyRefreshListViewApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyRefreshListViewApp> {

  void initState(){
    _scrollController.addListener((){
      if(_scrollController.position.pixels==_scrollController.position.maxScrollExtent){
        _loadData();
      }
    });
    super.initState();
  }
  List<String> cityNames=['北京', '上海', '广州','深圳', '杭州','苏州','成都', '武汉', '洛阳','厦门', '青岛','拉萨'];
  ScrollController _scrollController=ScrollController();


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

  _loadData() async{
    await Future.delayed(Duration(milliseconds: 200));
    setState(() {
      List<String>list=List<String>.from(cityNames);
      list.addAll(cityNames);
      cityNames=list;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: Text('高级功能列表下拉刷新与上拉加载更多功能实现')),
          body: RefreshIndicator(
              onRefresh: _handleRefresh,
            child:  ListView(
              controller: _scrollController,
                children:_buildList()
            ),
          )
    ));
  }

  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.green),
      child: Text(
        city,
        style: TextStyle(color:Colors.black54,fontSize: 20),
      ),
    );
  }

}

注：

1、未解决的问题①listview下拉刷新时并没有和手势一起向下移动

②在State类里不能覆盖方法initState()和dispose()

2、在dispose()方法中需要注销scrollcontroller

列表下拉刷新与上拉加载更多功能实现