Flutter下拉刷新、上拉加載

注意： 滾動組件添加： physics: ClampingScrollPhysics() 可以處理IOS系統(tǒng)的物理滾動的效果（即橡皮筋效果）

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)、雅安網(wǎng)絡(luò)推廣、微信平臺小程序開發(fā)、雅安網(wǎng)絡(luò)營銷、雅安企業(yè)策劃、雅安品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供雅安建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

ListView 是最常用的可滾動組件之一，可以沿一個方向線性排布所有子組件，并且它也支持基于Sliver的延遲構(gòu)建模型

默認(rèn)構(gòu)造函數(shù)：

ListView.builder：

ListView.separated：

ListView.separated 可以在生成的列表項(xiàng)之間添加一個分割組件，它比 ListView.builder 多了一個 separatorBuilder 參數(shù)，該參數(shù)是一個分割組件生成器。

RefreshIndicator 下拉刷新：

RefreshIndicator 是 Material 風(fēng)格的下拉刷新組件。

CupertinoSliverRefreshControl 下拉刷新：

CupertinoSliverRefreshControl 是 ios 風(fēng)格的下拉刷新控件。

上拉加載的功能，需要用到 ScrollController + ListView組件:

Flutter 擴(kuò)展NestedScrollView （三）下拉刷新的解決

但是在使用官方的下拉刷新 RefreshIndicator 發(fā)現(xiàn)沒法使用。

默默打開了源碼，我們再來看一看。

首先，我調(diào)試到這個，發(fā)現(xiàn)notification.depth不為0，其實(shí)也好理解，因?yàn)镹estedScrollView里面有很多能滾動的東西。默認(rèn)的RefreshIndicator要求的是必須是第一層的它才其效果。

那么我改成,再試試呢？

在_handleScrollNotification方法中，我們可以看到會有很多ScrollNotification進(jìn)來，不同的，當(dāng)你滑動在一個不能滾動的list里面的時候，獲取的viewportDimension是為0.。這會覆蓋掉之前有viewportDimension的值。

所以我做了以下改動

對于NestedScrollView 來說。我們只需要關(guān)注最大能滾動viewportDimension，用這個來驅(qū)動整個下拉刷新.

用法跟官方一致

最后放上 Github extended_nested_scroll_view ，如果你有更好的方式解決這個問題或者有什么不明白的地方，都請告訴我，由衷感謝。

Flutter 下拉刷新、上拉加載flutter_easyrefresh的使用

flutter_easyrefresh: ^2.0.5

Pub get一下

下面我就以flutter_easyrefresh這個插件進(jìn)行講解。

[參照]{ }

Flutter listview下拉刷新，上拉加載更多封裝

本文在 pull_to_refresh 的基礎(chǔ)上對刷新做了封裝，可以根據(jù)刷新狀態(tài)自定義想要的頭和尾。

本文刷新頭和尾都使用的 lottie 動畫,

lottie動畫可以參考

接下來就可以在需要使用list view刷新的頁面使用了 如下：

效果圖：