Flutter之下拉刷新和上拉加載

一、下拉刷新

在Flutter中有一個RefreshIndicator，它是一個下拉刷新的widget，通過它我們可實現列表的下拉刷新的操作。

 

二、上拉加載

在Flutter中有一個ScrollController 列表支持設置controller參數，通過ScrollController監聽列表滾動的位置,來實現加載更多的功能。

 

demo：

import 'package:flutter/material.dart';


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

List<String> list = ['北京','上海','廣州','深圳','杭州','蘇州','成都','重慶','寧夏','銀川'];
int index = 0;

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

  @override
  _MyAppState createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  ScrollController _scrollController = 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) {
    return new MaterialApp(
      title: '下拉刷新',
      home: Scaffold(
        appBar: AppBar(
          title: Text("下拉刷新"),
        ),
        body: RefreshIndicator(
          child: ListView(
            controller: _scrollController,
            children: _buildList(),
          ),
          onRefresh: _refresh,
        ),
      ),
    );
  }

  List<Widget> _buildList(){
    return list.map((city)=>_item(city)).toList();
  }
  _loadData() async{
    await Future.delayed(Duration(microseconds: 200));
    setState(() {
      List<String> newList = List<String>.from(list);
      newList.addAll(list);
      list = newList;
    });
  }

  Future<Null> _refresh() async{
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      list.insert(0, "我是第${++index}下拉刷新加進來的");
    });
    return null;
  }
  Widget _item(String city){
    return Container(
      height: 80,
      margin: EdgeInsets.only(bottom: 5),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.blue),
      child: Text(
        city,
        style: TextStyle(color: Colors.white,fontSize: 20),
      ),
    );
  }
}