Flutter下拉刷新、上拉加載

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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序設(shè)計(jì)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了同江免費(fèi)建站歡迎大家使用！

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

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

ListView.builder：

ListView.separated：

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

RefreshIndicator 下拉刷新：

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

CupertinoSliverRefreshControl 下拉刷新：

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

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

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

flutter_easyrefresh: ^2.0.5

Pub get一下

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

[參照]{ }

解決 IOS H5 div 中 bounces 滑動(dòng)回彈效果去除的各種嘗試

結(jié)果整個(gè)頁面都無法滑動(dòng)，不是我要的效果。如果是有頁面不要滑動(dòng)的那種可以嘗試。

使用 vue-bounce 來解決，也沒啥用。不知道是不是我打開的方式不對。

安裝

使用指令

PS ：又嘗試了一下，還是有點(diǎn)效果的。就是在頂部進(jìn)行下拉時(shí)會(huì)禁用掉 touchmove 事件，但是效果還是不好。因?yàn)槲铱赡芟韧禄粍?dòng)又往別的方向滑。

靈光一閃，想問下 IOS 端的同學(xué)能不能把彈性關(guān)了，他給出的解決方案，結(jié)合我們 native 端使用了 flutter，給出方案：

我讓 native 端的同學(xué)進(jìn)行嘗試，結(jié)果據(jù) flutter 端同事回復(fù)，這個(gè)開關(guān)只關(guān)閉了頁面整體邊緣的橡皮筋效果，對于 H5 內(nèi) div 的邊界彈性效果無效。

網(wǎng)上找的方案，明顯不對味。

沒什么用……感覺這個(gè)是解決頁面整體彈性滑動(dòng)的。

使用一個(gè)新的 CSS 屬性來實(shí)現(xiàn)

結(jié)果，依舊不行。

使用 來阻止回彈效果，發(fā)現(xiàn)效果應(yīng)該是和 vue-bounce 一樣，在用戶直接拖拽邊緣的時(shí)候禁用移動(dòng)行為，但依然存在來回滑動(dòng)沒反應(yīng)的情況。

最后通過自己寫拖拽滑動(dòng)，的確解決了這個(gè)問題。解決方案在 解決 IOS 13+ H5 滑動(dòng)邊界橡皮筋彈性效果

一文中。

flutter 下拉選擇的使用

pubspec.yaml中配置該庫

先講一下選擇器適配器的格式如下

上面這個(gè)適配器的寫法看起來比較糟糕，數(shù)據(jù)少還可以一個(gè)一個(gè)的寫下去，一旦多了不可能一個(gè)個(gè)去寫，而是需要將給出的數(shù)據(jù)遍歷生成上面的這種格式

參考下面的數(shù)據(jù)數(shù)據(jù)處理，去生成相對應(yīng)的數(shù)據(jù)適配器

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

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

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

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

那么我改成,再試試呢？

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

所以我做了以下改動(dòng)

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

用法跟官方一致

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

Flutter-下拉刷新、上拉加載組件的封裝和使用

閑來有空，升級了新的SDK版本，之前舊的組件不再可用，封裝一個(gè)全新支持Dart“nullsafety”空安全特性、更加簡單易用的ListView組件。

利用NotificationListener的監(jiān)聽事件實(shí)現(xiàn)Pull up load more。

利用RefreshIndicator組件實(shí)現(xiàn)Pull down refresh。

已開源上傳至GITHUB，歡迎Star、Fork。