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

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

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--

相關文章