注意: 滾動組件添加: physics: ClampingScrollPhysics() 可以處理IOS系統(tǒng)的物理滾動的效果(即橡皮筋效果)
創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務靈川,10多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:028-86922220
ListView 是最常用的可滾動組件之一,可以沿一個方向線性排布所有子組件,并且它也支持基于Sliver的延遲構(gòu)建模型
默認構(gòu)造函數(shù):
ListView.builder:
ListView.separated:
ListView.separated 可以在生成的列表項之間添加一個分割組件,它比 ListView.builder 多了一個 separatorBuilder 參數(shù),該參數(shù)是一個分割組件生成器。
RefreshIndicator 下拉刷新:
RefreshIndicator 是 Material 風格的下拉刷新組件。
CupertinoSliverRefreshControl 下拉刷新:
CupertinoSliverRefreshControl 是 ios 風格的下拉刷新控件。
上拉加載的功能,需要用到 ScrollController + ListView組件:
Flutter有兩個常用的狀態(tài)類:
標記為dirty,執(zhí)行的markNeedsBuild,定義在Element類中:
當前Element節(jié)點被標記為dirty,同時調(diào)用owner的scheduleBuildFor方法:
將element元素添加到全局的“臟”鏈表里。
BuildOwner用來管理哪些需要更新的Widget。這個owner最開始被初始化的地方在WidgetsBinding的initInstances方法中,隨后初始化了onBuildScheduled方法,對應執(zhí)行的是_handleBuildScheduled,定義在WidgetsBinding類中:
ensureVisualUpdate 方法定義在SchedulerBinding類中:
在提交下一幀繪制的時候會調(diào)用到scheduleFrame方法,提交給引擎繪制,看看scheduleFrame方法,也定義在SchedulerBinding類中:
提交給引擎繪制之后,會收到onDrawFrame的回調(diào),最終執(zhí)行到_handleDrawFrame方法中,對應的是handleDrawFrame方法,定義在SchedulerBinding類中:
在RendererBinding的initInstances方法中添加了一個回調(diào)到這個List中,對應的是RenderBinding的drawFrame方法,對應的節(jié)點進行繪制渲染操作。
WidgetsBinding中的drawFrame方法:
看看這里的buildScope方法,定義在BuildOwner方法中。在上面 scheduleBuildFor 方法介紹中有提到:"scheduleBuildFor 是把一個 element 添加到 _dirtyElements 鏈表,以便當[WidgetsBinding.drawFrame]中調(diào)用 buildScope 的時候能夠重構(gòu) element。onBuildScheduled()是一個 BuildOwner 的回調(diào)"。在 drawFrame 中調(diào)用 buildOwner.buildScope(renderViewElement)更新 elements。
_dirtyElements列表在遍歷的過程中執(zhí)行rebuild方法,此時將所有標記為dirty的Element節(jié)點依次執(zhí)行rebuild,preformRebuild,build,updateChild,update方法,執(zhí)行界面更新。完成build,update操作完成之后,后續(xù)會將需要繪制的RenderObject添加到需要layout的列表中,等待繪制渲染。所有繪制完成之后將_dirtyElments列表清空,_inDirtyList標記位置為false。
提交給引擎繪制渲染
看看super.drawFrame(),這里就執(zhí)行到了RendererBinding類中,定義如下:
這里就是將最終需要繪制渲染的畫面提交給引擎的地方了,繪制完成之后就在界面顯示更新后的視圖了。
但是在使用官方的下拉刷新 RefreshIndicator 發(fā)現(xiàn)沒法使用。
默默打開了源碼,我們再來看一看。
首先,我調(diào)試到這個,發(fā)現(xiàn)notification.depth不為0,其實也好理解,因為NestedScrollView里面有很多能滾動的東西。默認的RefreshIndicator要求的是必須是第一層的它才其效果。
那么我改成,再試試呢?
在_handleScrollNotification方法中,我們可以看到會有很多ScrollNotification進來,不同的,當你滑動在一個不能滾動的list里面的時候,獲取的viewportDimension是為0.。這會覆蓋掉之前有viewportDimension的值。
所以我做了以下改動
對于NestedScrollView 來說。我們只需要關(guān)注最大能滾動viewportDimension,用這個來驅(qū)動整個下拉刷新.
用法跟官方一致
最后放上 Github extended_nested_scroll_view ,如果你有更好的方式解決這個問題或者有什么不明白的地方,都請告訴我,由衷感謝。
Flutter中Widget分為StatefulWidget和StatelessWidget,分別為動態(tài)視圖和靜態(tài)視圖,視圖的更新需要調(diào)用StatefulWidget的setState方法,這會遍歷調(diào)用子Widget的build方法。當一個主頁面比較復雜時,會包含多個widget,如果直接調(diào)用setState,會遍歷所有子Widget的build,這是非常不必要的性能開銷,有沒有單獨刷新指定Widget的方式呢?這個時候就要用到GlobalKey了。
一個StatefulWidget包含一個Button,一個Text,通過點擊Button調(diào)用主Widget的setState方法,刷新Text,示例如下:
同樣一個StatefulWidget包含一個多個Text和Button,點擊Button我們只需要刷新指定的Text,通過GlobalKey的方式,實現(xiàn)如下:
主Widget,包含一個需要更新的TextWidget和一個不需要更新的Text
需要單獨更新的Widget
傳遞事件的Button
這樣點擊Button就只會更新指定的TextWidget了,效果如下:
這只是一個簡單的例子,在實際開發(fā)中為了頁面刷新的高效率,模塊化封裝非常重要。很多情況下都只需要局部刷新,而不是重構(gòu)整個視圖。所以Globalkey的運用在項目中需要熟練掌握
這種方法最常見,但是有些地方引用的話,刷新的成本比較大,刷新的是整個頁面,數(shù)據(jù)太多加載太慢的話,會有閃爍的現(xiàn)象
這種方法類似于iOS中的set方法,通過設(shè)置某個屬性的時候,去刷新某個控件。在flutter中這種刷新方式,是對上面setState(){}方法的改進,根本的方法還是setState(){},只不過是通過方法去刷新某個控件。如下:
首先在pubspec.yaml中添加provider依賴
下面通過provider來實現(xiàn)一個發(fā)送驗證碼的案例。
創(chuàng)建一個TimerModel文件
頁面布局如下: