可滾動組件都直接或間接包含一個Scrollable組件宵统。
SingleChildScrollView
SingleChildScrollView類似于Android中的ScrollView,它只能接收一個子組件。
ListView
默認構(gòu)造函數(shù)
默認構(gòu)造函數(shù)有一個children參數(shù)型雳,它接受一個Widget列表(List)匙赞。這種方式適合只有少量的子組件的情況妖碉,因為這種方式需要將所有children都提前創(chuàng)建好(這需要做大量工作)涌庭,而不是等到子widget真正顯示的時候再創(chuàng)建,也就是說通過默認構(gòu)造函數(shù)構(gòu)建的ListView沒有應用基于Sliver的懶加載模型欧宜。實際上通過此方式創(chuàng)建的ListView和使用SingleChildScrollView+Column的方式?jīng)]有本質(zhì)的區(qū)別坐榆。
ListView.builder
ListView.builder適合列表項比較多(或者無限)的情況,因為只有當子組件真正顯示的時候才會被創(chuàng)建冗茸,也就說通過該構(gòu)造函數(shù)創(chuàng)建的ListView是支持基于Sliver的懶加載模型的席镀。
ListView.separated
ListView.separated可以在生成的列表項之間添加一個分割組件,它比ListView.builder多了一個separatorBuilder參數(shù)夏漱,該參數(shù)是一個分割組件生成器豪诲。
GridView
GridView可以構(gòu)建一個二維網(wǎng)格列表
SliverGridDelegateWithFixedCrossAxisCount
該子類實現(xiàn)了一個橫軸為固定數(shù)量子元素的layout算法
GridView.count
GridView.count構(gòu)造函數(shù)內(nèi)部使用了SliverGridDelegateWithFixedCrossAxisCount,我們通過它可以快速的創(chuàng)建橫軸固定數(shù)量子元素的GridView挂绰。
SliverGridDelegateWithMaxCrossAxisExtent
該子類實現(xiàn)了一個橫軸子元素為固定最大長度的layout算法屎篱。
GridView.extent
GridView.extent構(gòu)造函數(shù)內(nèi)部使用了SliverGridDelegateWithMaxCrossAxisExtent,我們通過它可以快速的創(chuàng)建縱軸子元素為固定最大長度的的GridView。
更多
Flutter的GridView默認子元素顯示空間是相等的交播,但在實際開發(fā)中重虑,你可能會遇到子元素大小不等的情況,如下面這樣的布局:
Pub上有一個包“flutter_staggered_grid_view” 秦士,它實現(xiàn)了一個交錯GridView的布局模型缺厉,可以很輕松的實現(xiàn)這種布局
CustomScrollView
CustomScrollView是可以使用Sliver來自定義滾動模型(效果)的組件。它可以包含多種滾動模型伍宦,舉個例子芽死,假設有一個頁面,頂部需要一個GridView次洼,底部需要一個ListView关贵,而要求整個頁面的滑動效果是統(tǒng)一的,即它們看起來是一個整體卖毁。如果使用GridView+ListView來實現(xiàn)的話揖曾,就不能保證一致的滑動效果,因為它們的滾動效果是分離的亥啦,所以這時就需要一個"膠水"炭剪,把這些彼此獨立的可滾動組件"粘"起來,而CustomScrollView的功能就相當于“膠水”翔脱。
滾動監(jiān)聽及控制
ScrollController
滾動位置恢復
PageStorage是一個用于保存頁面(路由)相關(guān)數(shù)據(jù)的組件奴拦,它并不會影響子樹的UI外觀,其實届吁,PageStorage是一個功能型組件错妖,它擁有一個存儲桶(bucket),子樹中的Widget可以通過指定不同的PageStorageKey來存儲各自的數(shù)據(jù)或狀態(tài)疚沐。
ScrollPosition
ScrollPosition是用來保存可滾動組件的滾動位置的暂氯。一個ScrollController對象可以同時被多個可滾動組件使用,ScrollController會為每一個可滾動組件創(chuàng)建一個ScrollPosition對象亮蛔,這些ScrollPosition保存在ScrollController的positions屬性中(List<ScrollPosition>)痴施。