建站
咨詢
售后
建站咨詢
新聞中心
Flutter 之 可滾動(dòng)組件 -- 理論知識(shí)點(diǎn)（十四）
Flutter 中有兩種布局模型：
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作與策劃設(shè)計(jì),灤州網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:灤州等地區(qū)。灤州做網(wǎng)站價(jià)格咨詢:028-86922220
基于 RenderBox 的盒模型布局。
基于 Sliver ( RenderSliver ) 按需加載列表布局。
通?？蓾L動(dòng)組件的子組件可能會(huì)非常多、占用的總高度也會(huì)非常大；如果要一次性將子組件全部構(gòu)建出將會(huì)非常昂貴！為此，F(xiàn)lutter中提出一個(gè)Sliver（中文為“薄片”的意思）概念，Sliver 可以包含一個(gè)或多個(gè)子組件。Sliver 的主要作用是配合：加載子組件并確定每一個(gè)子組件的布局和繪制信息，如果 Sliver 可以包含多個(gè)子組件時(shí)，通常會(huì)實(shí)現(xiàn)按需加載模型。
只有當(dāng) Sliver 出現(xiàn)在視口中時(shí)才會(huì)去構(gòu)建它，這種模型也稱為“基于Sliver的列表按需加載模型”?？蓾L動(dòng)組件中有很多都支持基于Sliver的按需加載模型，如 ListView 、 GridView ，但是也有不支持該模型的，如 SingleChildScrollView 。
Flutter 中的可滾動(dòng)主要由三個(gè)角色組成： Scrollable 、 Viewport 和 Sliver ：
具體布局過(guò)程：
比如有一個(gè) ListView，大小撐滿屏幕，假設(shè)它有 100 個(gè)列表項(xiàng)（都是RenderBox）且每個(gè)列表項(xiàng)高度相同，結(jié)構(gòu)如圖6-1所示：
圖中白色區(qū)域?yàn)樵O(shè)備屏幕，也是 Scrollable 、 Viewport 和 Sliver 所占用的空間，三者所占用的空間重合，父子關(guān)系為：Sliver 父組件為 Viewport，Viewport的 父組件為 Scrollable 。注意ListView 中只有一個(gè) Sliver，在 Sliver 中實(shí)現(xiàn)了子組件的按需加載。
其中頂部和底部灰色的區(qū)域?yàn)?cacheExtent，它表示預(yù)渲染的高度，需要注意這是在可視區(qū)域之外，如果 RenderBox 進(jìn)入這個(gè)區(qū)域內(nèi)，即使它還未顯示在屏幕上，也是要先進(jìn)行構(gòu)建的，預(yù)渲染是為了后面進(jìn)入 Viewport 的時(shí)候更絲滑。cacheExtent 的默認(rèn)值是 250，在構(gòu)建可滾動(dòng)列表時(shí)我們可以指定這個(gè)值，這個(gè)值最終會(huì)傳給 Viewport。
用于處理滑動(dòng)手勢(shì)，確定滑動(dòng)偏移，滑動(dòng)偏移變化時(shí)構(gòu)建 Viewport，我們看一下其關(guān)鍵的屬性：
在可滾動(dòng)組件的坐標(biāo)描述中，通常將滾動(dòng)方向稱為主軸，非滾動(dòng)方向稱為縱軸。由于可滾動(dòng)組件的默認(rèn)方向一般都是沿垂直方向，所以默認(rèn)情況下主軸就是指垂直方向，水平方向同理。
Viewport 比較簡(jiǎn)單，用于渲染當(dāng)前視口中需要顯示 Sliver。
需要注意的是：
Sliver 主要作用是對(duì)子組件進(jìn)行構(gòu)建和布局，比如 ListView 的 Sliver 需要實(shí)現(xiàn)子組件（列表項(xiàng)）按需加載功能，只有當(dāng)列表項(xiàng)進(jìn)入預(yù)渲染區(qū)域時(shí)才會(huì)去對(duì)它進(jìn)行構(gòu)建和布局、渲染。
Sliver 對(duì)應(yīng)的渲染對(duì)象類型是 RenderSliver，RenderSliver 和 RenderBox 的相同點(diǎn)是都繼承自 RenderObject 類，不同點(diǎn)是在布局的時(shí)候約束信息不同。RenderBox 在布局時(shí)父組件傳遞給它的約束信息對(duì)應(yīng)的是 BoxConstraints ，只包含最大寬高的約束；而 RenderSliver 在布局時(shí)父組件（列表）傳遞給它的約束是對(duì)應(yīng)的是 SliverConstraints 。關(guān)于 Sliver 的布局協(xié)議，我們將在本章最后一節(jié)中介紹。
幾乎所有的可滾動(dòng)組件在構(gòu)造時(shí)都能指定 scrollDirection （滑動(dòng)的主軸）、 reverse （滑動(dòng)方向是否反向）、 controller 、 physics 、 cacheExtent ，這些屬性最終會(huì)透?jìng)鹘o對(duì)應(yīng)的 Scrollable 和 Viewport，這些屬性我們可以認(rèn)為是可滾動(dòng)組件的通用屬性，后續(xù)再介紹具體的可滾動(dòng)組件時(shí)將不再贅述。
可滾動(dòng)組件都有一個(gè) controller 屬性，通過(guò)該屬性我們可以指定一個(gè) ScrollController 來(lái)控制可滾動(dòng)組件的滾動(dòng)，比如可以通過(guò)ScrollController來(lái)同步多個(gè)組件的滑動(dòng)聯(lián)動(dòng)。由于 ScrollController 是需要結(jié)合可滾動(dòng)組件一起工作，所以本章中，我們會(huì)在介紹完 ListView 后詳細(xì)介紹 ScrollController。
Scrollbar是一個(gè)Material風(fēng)格的滾動(dòng)指示器（滾動(dòng)條），如果要給可滾動(dòng)組件添加滾動(dòng)條，只需將Scrollbar作為可滾動(dòng)組件的任意一個(gè)父級(jí)組件即可，如：
Scrollbar 和 CupertinoScrollbar 都是通過(guò)監(jiān)聽滾動(dòng)通知來(lái)確定滾動(dòng)條位置的。關(guān)于的滾動(dòng)通知的詳細(xì)內(nèi)容我們將在本章最后一節(jié)中專門介紹。
CupertinoScrollbar是 iOS 風(fēng)格的滾動(dòng)條，如果你使用的是Scrollbar，那么在iOS平臺(tái)它會(huì)自動(dòng)切換為CupertinoScrollbar
Flutter 之 滾動(dòng)監(jiān)聽及控制（十九）
ListView、GridView的組件控制器是ScrollController，我們可以通過(guò)它來(lái)獲取視圖的滾動(dòng)信息，并且可以調(diào)用里面的方法來(lái)更新視圖的滾動(dòng)位置。
ScrollController構(gòu)造函數(shù)如下：
ScrollController常用的屬性和方法：
ScrollController間接繼承自Listenable，我們可以根據(jù)ScrollController來(lái)監(jiān)聽滾動(dòng)事件，如：
示例
我們創(chuàng)建一個(gè)ListView，當(dāng)滾動(dòng)位置發(fā)生變化時(shí)，我們先打印出當(dāng)前滾動(dòng)位置，然后判斷當(dāng)前位置是否超過(guò)1000像素，如果超過(guò)則在屏幕右下角顯示一個(gè)“返回頂部”的按鈕，該按鈕點(diǎn)擊后可以使ListView恢復(fù)到初始位置；如果沒(méi)有超過(guò)1000像素，則隱藏“返回頂部”按鈕。
ScrollPosition是用來(lái)保存可滾動(dòng)組件的滾動(dòng)位置的。一個(gè)ScrollController對(duì)象可以同時(shí)被多個(gè)可滾動(dòng)組件使用，ScrollController會(huì)為每一個(gè)可滾動(dòng)組件創(chuàng)建一個(gè)ScrollPosition對(duì)象，這些ScrollPosition保存在ScrollController的positions屬性中（ListScrollPosition）。ScrollPosition是真正保存滑動(dòng)位置信息的對(duì)象，offset只是一個(gè)便捷屬性
一個(gè) ScrollController 雖然可以對(duì)應(yīng)多個(gè)可滾動(dòng)組件，但是有一些操作，如讀取滾動(dòng)位置 offset ，則需要一對(duì)一！但是我們?nèi)匀豢梢栽谝粚?duì)多的情況下，通過(guò)其它方法讀取滾動(dòng)位置，舉個(gè)例子，假設(shè)一個(gè) ScrollController 同時(shí)被兩個(gè)可滾動(dòng)組件使用，那么我們可以通過(guò)如下方式分別讀取他們的滾動(dòng)位置：
我們可以通過(guò) controller.positions.length 來(lái)確定 controller 被幾個(gè)可滾動(dòng)組件使用。
ScrollPosition 有兩個(gè)常用方法： animateTo() 和 jumpTo() ，它們是真正來(lái)控制跳轉(zhuǎn)滾動(dòng)位置的方法， ScrollController 的這兩個(gè)同名方法，內(nèi)部最終都會(huì)調(diào)用 ScrollPosition 的。
我們來(lái)介紹一下 ScrollController 的另外三個(gè)方法：
當(dāng) ScrollController 和可滾動(dòng)組件關(guān)聯(lián)時(shí)，可滾動(dòng)組件首先會(huì)調(diào)用 ScrollController 的 createScrollPosition() 方法來(lái)創(chuàng)建一個(gè) ScrollPosition 來(lái)存儲(chǔ)滾動(dòng)位置信息，接著，可滾動(dòng)組件會(huì)調(diào)用 attach() 方法，將創(chuàng)建的 ScrollPosition 添加到 ScrollController 的 positions 屬性中，這一步稱為“注冊(cè)位置”，只有注冊(cè)后 animateTo() 和 jumpTo() 才可以被調(diào)用。
當(dāng)可滾動(dòng)組件銷毀時(shí)，會(huì)調(diào)用 ScrollController 的 detach() 方法，將其 ScrollPosition 對(duì)象從 ScrollController 的 positions 屬性中移除，這一步稱為“注銷位置”，注銷后 animateTo() 和 jumpTo() 將不能再被調(diào)用。
需要注意的是， ScrollController 的 animateTo() 和 jumpTo() 內(nèi)部會(huì)調(diào)用所有 ScrollPosition 的 animateTo() 和 jumpTo() ，以實(shí)現(xiàn)所有和該 ScrollController 關(guān)聯(lián)的可滾動(dòng)組件都滾動(dòng)到指定的位置。
Flutter Widget樹中子Widget可以通過(guò)發(fā)送通知（Notification）與父(包括祖先)Widget通信。父級(jí)組件可以通過(guò)NotificationListener組件來(lái)監(jiān)聽自己關(guān)注的通知
可滾動(dòng)組件在滾動(dòng)時(shí)會(huì)發(fā)送 ScrollNotification 類型的通知， ScrollBar 正是通過(guò)監(jiān)聽滾動(dòng)通知來(lái)實(shí)現(xiàn)的。通過(guò) NotificationListener 監(jiān)聽滾動(dòng)事件和通過(guò) ScrollController 有兩個(gè)主要的不同：
示例
下面，我們監(jiān)聽ListView的滾動(dòng)通知，然后顯示當(dāng)前滾動(dòng)進(jìn)度百分比：
在接收到滾動(dòng)事件時(shí)，參數(shù)類型為ScrollNotification，它包括一個(gè)metrics屬性，它的類型是ScrollMetrics，該屬性包含當(dāng)前ViewPort及滾動(dòng)位置等信息：
Flutter：手把手教你使用滾動(dòng)型列表組件：ListView
ListView的基礎(chǔ)創(chuàng)建使用有三種方式：
通過(guò)默認(rèn)構(gòu)造函數(shù)來(lái)創(chuàng)建列表，應(yīng)用場(chǎng)景 = 短列表
這種方式創(chuàng)建的列表存在一個(gè)問(wèn)題：對(duì)于那些長(zhǎng)列表或者需要較昂貴渲染開銷的子組件，即使還沒(méi)有出現(xiàn)在屏幕中但仍然會(huì)被ListView所創(chuàng)建，這將是一項(xiàng)較大的開銷，使用不當(dāng)可能引起性能問(wèn)題甚至卡頓。
長(zhǎng)列表
列表子項(xiàng)之間需要分割線
ListView的進(jìn)階使用主要包括：下拉刷新 上拉加載
在Flutter中，ListView結(jié)合RefreshIndicator組件實(shí)現(xiàn)下拉刷新
通過(guò)包裹一層RefreshIndicator，自定義onRefresh回調(diào)方法實(shí)現(xiàn)
方式有兩種：
通過(guò)ListView.controller屬性可以判斷ListView是否滑動(dòng)到了底部，再進(jìn)行上拉加載
NotificationListener是一個(gè)Widget，可監(jiān)聽子Widget發(fā)出的Notification
ListView在滑動(dòng)時(shí)中會(huì)發(fā)出ScrollNotification類型的通知，可通過(guò)監(jiān)聽該通知得到ListView的滑動(dòng)狀態(tài)，判斷是否滑動(dòng)到了底部，從而進(jìn)行上拉加載
NotificationListener有一個(gè)onNotification屬性，定義了監(jiān)聽的回調(diào)方法，通過(guò)它來(lái)處理加載更多邏輯
不定期分享關(guān)于 安卓開發(fā) 的干貨，追求 短、平、快 ，但 卻不缺深度 。
文章標(biāo)題：flutter滾動(dòng),flutter滾動(dòng)沖突
文章URL：http://fisionsoft.com.cn/article/dsgipdc.html
