flutter - RefreshIndicator實現下拉刷新、上拉加載 | 掘金技術徵文

思路:flutter中存在progress_indicator.dart這個文件,裏面有RefreshIndicator這裏類,裏面存在這咱們須要使用的方法: bash

我下面將主要解釋用這個方法處理上拉加載和下拉刷新;

首先須要定義一個變量:網絡

var curPage = 1;將使用它做爲一個標識,用因而首次頁面仍是加載頁面; 每次上拉加載會加1,如curPage++;這個標識也能夠用於每次網絡的請求(例如: 每次拉取10條;第一次是0-9的數據的10條數據,第二次從新請求10-19的數據)async

其次添加ScrollController _controller = new ScrollController(); 這裏_controller將用於上拉滑動監聽ide

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");
        });
      }
    });
複製代碼

數據由網絡請求獲取!每人使用的都不同,不用解釋了~post

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

總體代碼以下:spa

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 技術實踐 | 掘金技術徵文,徵文活動正在進行中code

相關文章
相關標籤/搜索