Flutter 之ListView实现下拉刷新和上拉加载更多

一、效果

 

二、实现

        1、首先的创建ListView，之前有叙述

        2、如果你是只需要下拉刷新，则直接用 RefreshIndicator包裹ListView，然后去实现onRefresh方法即可

        3、如果你还需要加载更多，则需要实现ScrollController然后去监听他的滑动事件，然后判断是否到达底部

三、源代码

class StarPage extends StatefulWidget {
  const StarPage({Key key}) : super(key: key);

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

var citys = [
  "北京",
  "北京",
  "上海",
  "北京",
  "广东",
  "深圳",
  "北京",
  "杭州",
  "北京",
  "苏州",
  "北京",
  "苏州",
  "武汉",
  "苏州",
  "郑州",
  "天津"
];

class _StarPageState extends State<StarPage> {
  ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        //达到最大滚动位置
        _loadData();
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "星球",
      home: Scaffold(
          appBar: AppBar(
            title: Text("星球"),
          ),
          //包裹listview ，设置高度
          body: RefreshIndicator(
            onRefresh: () {
              _onRefresh();
              return Future.value();
            },
            child: ListView(
              controller: _scrollController,
              children: _budildList(),
            ),
          )),
    );
  }

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

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

  Future<void> _onRefresh() async {
    await Future.delayed(Duration(seconds: 2), () {
      setState(() {
        citys.insert(0, "我是刷新1");
        citys.insert(0, "我是刷新2");
        citys.insert(0, "我是刷新3");
        citys.insert(0, "我是刷新4");
        citys.insert(0, "我是刷新5");
      });
    });
  }

  Future<void> _loadData() async {
    await Future.delayed(Duration(seconds: 2), () {
      setState(() {
        citys.add("我是加载更多1");
        citys.add("我是加载更多2");
        citys.add("我是加载更多3");
        citys.add("我是加载更多4");
        citys.add("我是加载更多5");
      });
    });
  }
}