Flutter了解之可滑動組件

Flutter官方并沒有對Widget進行官方分類，對其分類主要是為了對Widget進行功能區(qū)分。

創(chuàng)新互聯(lián)自2013年起，是專業(yè)互聯(lián)網技術服務公司，擁有項目成都網站制作、網站建設、外貿網站建設網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元永昌做網站,已為上家服務,為永昌各地企業(yè)和個人服務,聯(lián)系電話:13518219792

當組件內容超過當前顯示窗口時，如果沒有特殊處理，F(xiàn)lutter則會提示Overflow錯誤。為此，F(xiàn)lutter提供了多種可滾動組件用于顯示列表和長布局。

在可滾動組件的坐標描述中，通常將滾動方向稱為主軸，非滾動方向稱為縱軸。由于可滾動組件的默認方向一般都是沿垂直方向，所以默認情況下主軸就是指垂直方向，水平方向同理。

通?？蓾L動組件的子組件可能會非常多、占用的總高度也會非常大；如果要一次性將子組件全部構建出將會非常昂貴！為此，F(xiàn)lutter中提出一個Sliver（中文為“薄片”的意思）概念，如果一個可滾動組件支持Sliver模型，那么該滾動可以將子組件分成好多個“薄片”（Sliver），只有當Sliver出現(xiàn)在視口中時才會去構建它，這種模型也稱為“基于Sliver的延遲構建模型”。

可滾動組件中有很多都支持基于Sliver的延遲構建模型，如ListView、GridView，但是也有不支持該模型的，如SingleChildScrollView。

在很多布局系統(tǒng)中都有ViewPort的概念，在Flutter中，術語ViewPort（視口），如無特別說明，則是指一個Widget的實際顯示區(qū)域。例如: 一個ListView的顯示區(qū)域高度是800像素，雖然其列表項總高度可能遠遠超過800像素，但是其ViewPort仍然是800像素。

可滾動組件都直接或間接包含一個Scrollable組件

如果要給可滾動組件添加滾動條，只需將Scrollbar作為可滾動組件的任意一個父級組件。

沿一個方向線性排布所有子組件。支持基于Sliver的延遲構建模型。

ListView高度邊界無法確定時會異常。

默認構造函數(shù)有一個children參數(shù)，它接受一個Widget列表。

實際上通過此方式創(chuàng)建的ListView和使用SingleChildScrollView+Column的方式沒有本質的區(qū)別。

適合只有少量的子組件的情況，因為這種方式需要將所有children都提前創(chuàng)建好（這需要做大量工作），而不是等到子widget真正顯示的時候再創(chuàng)建，也就是說通過默認構造函數(shù)構建的ListView沒有應用基于Sliver的懶加載模型。

例

例

例（水平滾動）

適合列表項比較多（或者無限）的情況，因為只有當子組件真正顯示的時候才會被創(chuàng)建，也就說通過該構造函數(shù)創(chuàng)建的ListView是支持基于Sliver的懶加載模型的。

例

例

例（不同類型的item）

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

例

例

類似于Android中的ScrollView，它只能接收一個子組件。

通常內容不會超過屏幕太多時使用SingleChildScrollView，這是因為它不支持基于Sliver的延遲實例化模型，所以如果預計視口可能包含超出屏幕尺寸太多的內容時，那么使用SingleChildScrollView將會非常昂貴（性能差），此時應該使用一些支持Sliver延遲加載的可滾動組件，如ListView。

例（將大寫字母A-Z沿垂直方向顯示）

一個二維網格列表

GridView和ListView的大多數(shù)參數(shù)都是相同的。

橫軸為固定數(shù)量子元素。

GridView.count構造函數(shù)內部使用了SliverGridDelegateWithFixedCrossAxisCount。

例

例（GridView.count）

該子類實現(xiàn)了一個橫軸子元素為固定最大長度的layout算法

例

當子widget比較多時，可以通過GridView.builder來動態(tài)創(chuàng)建子widget。

GridView.builder 必須指定的參數(shù)有兩個，其中itemBuilder為子widget構建器。

例

舉個例子，假設有一個頁面，頂部需要一個GridView，底部需要一個ListView，而要求整個頁面的滑動效果是統(tǒng)一的，即它們看起來是一個整體。如果使用GridView+ListView來實現(xiàn)的話，就不能保證一致的滑動效果，因為它們的滾動效果是分離的。

所以這時就需要一個"膠水"，把這些彼此獨立的可滾動組件"粘"起來，而CustomScrollView的功能就相當于“膠水”。

Sliver有細片、薄片之意，在Flutter中Sliver通常指可滾動組件子元素。在CustomScrollView中，需要粘起來的可滾動組件就是CustomScrollView的Sliver了，如果直接將ListView、GridView作為CustomScrollView是不行的，因為它們本身是可滾動組件而并不是Sliver。

因此，為了能讓可滾動組件能和CustomScrollView配合使用，F(xiàn)lutter提供了一些可滾動組件的Sliver版，如SliverList、SliverGrid等。

實際上Sliver版的可滾動組件和非Sliver版的可滾動組件最大的區(qū)別就是前者不包含滾動模型（自身不能再滾動），而后者包含滾動模型 ，也正因如此，CustomScrollView才可以將多個Sliver"粘"在一起，這些Sliver共用CustomScrollView的Scrollable，所以最終才實現(xiàn)了統(tǒng)一的滑動效果。

例（SliverList）

例（SliverGrid）

可以用ScrollController來控制可滾動組件的滾動位置

例

滾動位置恢復

ScrollPosition

ScrollController控制原理

滾動監(jiān)聽

例

Flutter ScrollView（滾動視圖）

ScrollView 是一個帶有滾動的視圖組件。

ScrollView 由三部分組成：

ScrollView 有以下常用屬性：

注：ScrollView 是一個抽象類，通常使用 CustomScrollView。

SliverAppBar 可以實現(xiàn)背景，標題，頂部導航欄聯(lián)動，漸隱漸出動畫。

Flutter：手把手教你使用滾動型列表組件：ListView

ListView的基礎創(chuàng)建使用有三種方式：

通過默認構造函數(shù)來創(chuàng)建列表，應用場景 = 短列表

這種方式創(chuàng)建的列表存在一個問題：對于那些長列表或者需要較昂貴渲染開銷的子組件，即使還沒有出現(xiàn)在屏幕中但仍然會被ListView所創(chuàng)建，這將是一項較大的開銷，使用不當可能引起性能問題甚至卡頓。

長列表

列表子項之間需要分割線

ListView的進階使用主要包括：下拉刷新 上拉加載

在Flutter中，ListView結合RefreshIndicator組件實現(xiàn)下拉刷新

通過包裹一層RefreshIndicator，自定義onRefresh回調方法實現(xiàn)

方式有兩種：

通過ListView.controller屬性可以判斷ListView是否滑動到了底部，再進行上拉加載

NotificationListener是一個Widget，可監(jiān)聽子Widget發(fā)出的Notification

ListView在滑動時中會發(fā)出ScrollNotification類型的通知，可通過監(jiān)聽該通知得到ListView的滑動狀態(tài)，判斷是否滑動到了底部，從而進行上拉加載

NotificationListener有一個onNotification屬性，定義了監(jiān)聽的回調方法，通過它來處理加載更多邏輯

不定期分享關于 安卓開發(fā) 的干貨，追求 短、平、快 ，但 卻不缺深度 。

【Flutter】圖片、內容、滾動空間溢出調整

空間超出提示

注釋 ：Flutter Incorrect use of ParentDataWidget

問題原因：Expanded、Flexible等組件，在“Container、Padding、Stack”組件中導致的。

解決方案：保持： Expanded、Flexible 只在 Row、Column 等組件內，不在其他組件內使用。

控件Row有一個水平的布局方向，但是內容已經超出了可顯示的范圍。

建議我們使用有彈性的控件比如Expanded代替，或者使用可裁剪的控件ClipRect代替，還可以使用具體滾動屬性的控件比如ListView代替

1、類似圖片加載失敗,然后溢出擠壓空間，可以用Container包裹一下

直接使用，如果圖片地址失效，就會溢出

直接使用,圖片鏈接失效引起

2、類似這種超出

A RenderFlex overflowed by 48 pixels on the right.

3、類似這種Column滾動超出!

實現(xiàn)頁面滑動需要用到SingleChildScrollView組件，SingleChildScrollView和Android中ScrollView類似

問題原因：Expanded、Flexible等組件，在“Container、Padding、Stack”組件中導致的。

解決方案：保持：Expanded、Flexible只在Row、Column等組件內，不在其他組件內使用。

Flutter 可滾動組件 之 SingleChildScrollView （十五）

SingleChildScrollView 源碼定義如下：

需要注意的是， 通常 SingleChildScrollView 只應在期望的內容不會超過屏幕太多時使用 ，這是因為 SingleChildScrollView 不支持基于 Sliver 的延遲加載模型，所以如果預計視口可能包含超出屏幕尺寸太多的內容時，那么使用 SingleChildScrollView 將會非常昂貴（性能差），此時應該使用一些支持Sliver延遲加載的可滾動組件，如 ListView 。

示例1

下面是一個將大寫字母 A-Z 沿垂直方向顯示的例子，由于垂直方向空間會超過屏幕視口高度，所以我們使用SingleChildScrollView：

示例2

示例3 - 橫向滾動

分享名稱：flutter無限滾動,flutter 無限滾動
本文路徑：http://chinadenli.net/article8/hohdop.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、小程序開發(fā)、電子商務、關鍵詞優(yōu)化、面包屑導航、營銷型網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)