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('加載更多');
    });
  }

}