阅读 7195

flutter - RefreshIndicator实现下拉刷新、上拉加载 | 掘金技术征文

思路:flutter中存在progress_indicator.dart这个文件,里面有RefreshIndicator这里类,里面存在这我们需要使用的方法:

我下面将主要解释用这个方法处理上拉加载和下拉刷新;

首先需要定义一个变量:

var curPage = 1;将使用它作为一个标识,用于是首次页面还是加载页面; 每次上拉加载会加1,如curPage++;这个标识也可以用于每次网络的请求(例如: 每次拉取10条;第一次是0-9的数据的10条数据,第二次重新请求10-19的数据)

其次添加ScrollController _controller = new ScrollController(); 这里_controller将用于上拉滑动监听

  NewsListpageState() {
    _controller.addListener(() {
      var maxScroll = _controller.position.maxScrollExtent;
      var pixels = _controller.position.pixels;

      if (maxScroll == pixels && listData.length < 100){
//        上拉刷新做处理
        print('load more ...');
//        curPage++;
        setState(() {
          //改变数据,这里随意发挥
          listData = List<String>.generate(100, (i) => "CL $i");
        });
      }
    });
复制代码

数据由网络请求获取!每人使用的都不一样,不用解释了~

var listData = List<String>.generate(30, (i) => "CL $i");

整体代码如下:


class NewsListpageState extends State<NewsListPagedemo>{
  // TODO: implement build
  var curPage = 1;
  ScrollController _controller = new ScrollController();
  var listData = List<String>.generate(30, (i) => "CL $i");

  Future<Null> _pullToRefresh() async {
//    curPage = 1;
  //下拉刷新做处理
    setState(() {
      ////改变数据,这里随意发挥
      listData = List<String>.generate(30, (i) => "CL $i");
    });
    return null;
  }

  NewsListpageState() {
    _controller.addListener(() {
      var maxScroll = _controller.position.maxScrollExtent;
      var pixels = _controller.position.pixels;

      if (maxScroll == pixels && listData.length < 100){
//        上拉刷新做处理
        print('load more ...');
//        curPage++;
        setState(() {
          //改变数据,这里随意发挥
          listData = List<String>.generate(100, (i) => "CL $i");
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {

     Widget listView = new ListView.builder(
      itemCount: listData.length,
      itemBuilder: (context,i) {
        //这里填充自己想要的列表UI
        return new Container(
          height: 45.0,
          color: Colors.blue,
          child: new Text(
            "$i",
            style: new TextStyle(fontSize: 15.0),
          ),
        );
      },
      controller: _controller,
    );
    return new RefreshIndicator(child: listView, onRefresh: _pullToRefresh);
  }

}
复制代码

从 0 到 1:我的 Flutter 技术实践 | 掘金技术征文,征文活动正在进行中