Flutter系列（五）《列表下拉刷新和上拉加载》

引言

• 有列表使用的地方就会并存会用到刷新加载功能，今天带大家一起来学习一下。

1、下拉加载

• 我们通过使用RefreshIndicator组件来实现下拉刷新功能，首先我们来看下RefreshIndicator组件有哪些属性

const RefreshIndicator({
    Key key,
    @required this.child,
    this.displacement = 40.0,
    @required this.onRefresh,
    this.color,
    this.backgroundColor,
    this.notificationPredicate = defaultScrollNotificationPredicate,
    this.semanticsLabel,
    this.semanticsValue,
  })

• 如何使用

使用RefreshIndicator外层包裹List即可，onRefresh是下拉刷新触发的时间监听，至此下拉刷新就简单的实现了

body: Center(
        child: Container(
          child: RefreshIndicator(
            onRefresh: _loadNewData,
              child: ListView(
                controller: _scrollController,
                children: _buildList(),
              ),
          ),
        ),
      ),

  Future<void> _loadNewData() async{
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      cityList = CITY_NAMES;
    });
    return Null;
  }

2、上拉加载

• 上拉加载需要用到对列表的滚动监听，这时需要给List绑定一个ScrollController，在这之前需要重写initState和dispose方法，initState不言而喻是构造方法，dispose相当于iOS的dealloc、Android中的onDestroy方法

  @override
  void initState() {
    // TODO: implement initState
    _scrollController.addListener(() {  //添加监听

      if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent){  //判断是否滚动到列表底部
        _loadMoreData();
        print('开始执行');
      }
    });
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _scrollController.dispose();

    super.dispose();
  }

2、完整源码

• 下面源码还添加了列表嵌套结合下拉刷新和上拉加载综合使用

import 'package:flutter/material.dart';
const CITY_NAMES = ['北京','上海','广州','深圳','杭州','武汉','厦门','东莞','九江','南昌','萍乡','新余'];
const SON_CITY_NAMES = ['北京son','上海son','广州son','深圳son','杭州son','武汉son','厦门son','东莞son','九江son','南昌son','萍乡son','新余son'];
class TravelPage extends StatefulWidget {
  @override
  _TravelPageState createState() {
    // TODO: implement createState
    return _TravelPageState();
  }

}

class _TravelPageState extends State <TravelPage> {

  ScrollController _scrollController = ScrollController();
  List<String> cityList = List.from(CITY_NAMES);

  @override
  void initState() {
    // TODO: implement initState
    _scrollController.addListener(() {

      if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent){
        _loadMoreData();
        print('开始执行');
      }
    });
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _scrollController.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('List的嵌套使用'),
      ),
      body: Center(
        child: Container(
          child: RefreshIndicator(
            onRefresh: _loadNewData,
              child: ListView(
                controller: _scrollController,
                children: _buildList(),
              ),
          )
        ),
      )
      );
  }

  List<Widget> _buildList() {
    return cityList.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.orange),
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: _sonBuildList(),
      ),
    );
  }

  List<Widget> _sonBuildList() {
    return SON_CITY_NAMES.map((city) => _sonItem(city)).toList();
  }

  Widget _sonItem(String city) {
    return Container(
      width: 150,
      margin: EdgeInsets.only(right: 5),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.green),
      child: Text(
        city,
        style: TextStyle(color: Colors.white,fontSize: 20),
      ),
    );
  }

  Future<void> _loadNewData() async{
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      cityList = CITY_NAMES;
    });
    return Null;
  }

  _loadMoreData() async {
    await Future.delayed(Duration(seconds: 1));
    setState(() {
      List tempList = List<String>.from(cityList);
      tempList.addAll(cityList);
      cityList = tempList;
      print('加载更多');
    });
  }

}