flutter - listView 下拉重新整理 上拉載入

謝秀嶽lonelyBoy發表於2019-10-01

flutter 原生重新整理下拉重新整理,上拉載入

listView裡面沒有下拉重新整理,我們在上面加一個

下拉重新整理的元件RefreshIndicator

RefreshIndicator(
    onRefresh: () => onRefresh(),
    child: ...
)
複製程式碼

具體要做的事情,就是請求第一頁資料啦。


  onRefresh(){
    getInit({
      "pagesize": pagesize,
      "pagenumber": 0,
    });
  }
複製程式碼

getInit裡面就是請求,具體請求我在上個文章見過啦。

記得頁碼如果是0的時候,list要重新賦值,不是0的話,要addAll,這是我請求到資料後的操作,大家可以參考一下。

setState(() {
      if(params['pagenumber'] == 0){
        chapter_data = course_chapter_all_list.data; 
      }else{
        chapter_data.list.addAll(course_chapter_all_list.data.list);
      }
     list_load_status = 2;
    });
複製程式碼

Listview程式碼如下,我們展開說下

flutter - listView 下拉重新整理  上拉載入

itemCount是list的數量 controller是監聽滾動,判斷到了底部就載入資料,然後給loding

gif錄製比較麻煩,我就不錄製了

就是list底部加一個菊花,這個菊花我用的是new CircularProgressIndicator(),官方自帶的widget。

然後itemBuilder裡面就是具體渲染的東西了,有兩個引數,一個是上下文,一個是index,我們區index,然後從list裡面拿資料,返回widget就好了。

下拉滾動到底部

然後這時候我們需要實現下拉滾動到底部的動作,先上程式碼

    _scrollController.addListener(() {
        if (_scrollController.position.pixels >
          _scrollController.position.maxScrollExtent-20) {
          print('滑動到了最底部');
          getInit({
            "pagesize": pagesize,
            "pagenumber": pagenumber + 1,
          });
        }
    });
複製程式碼

_scrollController 需要先在state前面定義下ScrollController _scrollController = ScrollController();

當然,離開的時候也別忘了關閉 _scrollController.dispose();

這樣,我們就實現了上拉載入更多,這是我們還沒把上拉載入更多的動畫加上去

先寫一個載入動畫哈。程式碼如下:

  Widget _buildProgressIndicator() {
    return new Padding(
      padding: const EdgeInsets.all(8.0),
      child: new Center(
        child: new Opacity(
          opacity: list_load_status == 1 ? 1.0 : 00,
          child: new CircularProgressIndicator(),
        ),
      ),
    );
  }
複製程式碼

然後,listview裡面是沒有給你載入更多放widget的地方,怎麼辦呢,山人自有妙計,在最後一次渲染的時候加上去就好了。

載入更多

if(index + 1 == chapter_data.list.length){
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Container(child: item()),
      _buildProgressIndicator()
    ]
  );
}
複製程式碼

(裡面的item就是正常返回的值,這裡放在了前面,然後載入更多放後面)

這裡就完成了,下拉重新整理,上拉重新整理

這時候如果需要頂部自定義widget怎麼辦,一樣,的邏輯,在index == 0的時候,返回的時候前面加一個head Widget。

大家記得點贊啊,不然都木有動力

--END--

相關文章