flutter - RefreshIndicator實現下拉重新整理、上拉載入 | 掘金技術徵文

嘟嘟dududu發表於2018-08-08
FlutterIndicator

思路：flutter中存在progress_indicator.dart這個檔案，裡面有RefreshIndicator這裡類，裡面存在這我們需要使用的方法：

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

相關文章