Flutter可滾動組件

可滾動組件都直接或間接包含一個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>)痴施。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市究流,隨后出現(xiàn)的幾起案子辣吃,更是在濱河造成了極大的恐慌,老刑警劉巖芬探,帶你破解...
    沈念sama閱讀 206,723評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件齿尽,死亡現(xiàn)場離奇詭異,居然都是意外死亡灯节,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來炎疆,“玉大人卡骂,你說我怎么就攤上這事⌒稳耄” “怎么了全跨?”我有些...
    開封第一講書人閱讀 152,998評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長亿遂。 經(jīng)常有香客問我浓若,道長,這世上最難降的妖魔是什么蛇数? 我笑而不...
    開封第一講書人閱讀 55,323評論 1 279
  • 正文 為了忘掉前任挪钓,我火速辦了婚禮,結(jié)果婚禮上耳舅,老公的妹妹穿的比我還像新娘碌上。我一直安慰自己,他們只是感情好浦徊,可當我...
    茶點故事閱讀 64,355評論 5 374
  • 文/花漫 我一把揭開白布馏予。 她就那樣靜靜地躺著,像睡著了一般盔性。 火紅的嫁衣襯著肌膚如雪霞丧。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,079評論 1 285
  • 那天冕香,我揣著相機與錄音蛹尝,去河邊找鬼。 笑死暂筝,一個胖子當著我的面吹牛箩言,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播焕襟,決...
    沈念sama閱讀 38,389評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼陨收,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了鸵赖?” 一聲冷哼從身側(cè)響起务漩,我...
    開封第一講書人閱讀 37,019評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎它褪,沒想到半個月后饵骨,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,519評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡茫打,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,971評論 2 325
  • 正文 我和宋清朗相戀三年居触,在試婚紗的時候發(fā)現(xiàn)自己被綠了妖混。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,100評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡轮洋,死狀恐怖制市,靈堂內(nèi)的尸體忽然破棺而出儒恋,到底是詐尸還是另有隱情馁痴,我是刑警寧澤,帶...
    沈念sama閱讀 33,738評論 4 324
  • 正文 年R本政府宣布培廓,位于F島的核電站汉柒,受9級特大地震影響误褪,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜碾褂,卻給世界環(huán)境...
    茶點故事閱讀 39,293評論 3 307
  • 文/蒙蒙 一兽间、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧斋扰,春花似錦渡八、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至问裕,卻和暖如春逮壁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背粮宛。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1 262
  • 我被黑心中介騙來泰國打工窥淆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人巍杈。 一個月前我還...
    沈念sama閱讀 45,547評論 2 354
  • 正文 我出身青樓忧饭,卻偏偏與公主長得像,于是被迫代替她去往敵國和親筷畦。 傳聞我的和親對象是個殘疾皇子词裤,可洞房花燭夜當晚...
    茶點故事閱讀 42,834評論 2 345