Flutter 之 可滾動(dòng)組件 -- 理論知識(shí)點(diǎn)（十四）

Flutter 中有兩種布局模型：

建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁設(shè)計(jì)師等，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁設(shè)計(jì)技術(shù)配合操作的協(xié)同工作。創(chuàng)新互聯(lián)公司專業(yè)提供成都做網(wǎng)站、網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站制作(企業(yè)站、成都響應(yīng)式網(wǎng)站建設(shè)公司、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗(yàn)的提升,我們力求做到極致!

基于 RenderBox 的盒模型布局。

基于 Sliver ( RenderSliver ) 按需加載列表布局。

通常可滾動(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 ：

具體布局過程：

比如有一個(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 屬性，通過該屬性我們可以指定一個(gè) ScrollController 來控制可滾動(dòng)組件的滾動(dòng)，比如可以通過ScrollController來同步多個(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 都是通過監(jiān)聽滾動(dòng)通知來確定滾動(dòng)條位置的。關(guān)于的滾動(dòng)通知的詳細(xì)內(nèi)容我們將在本章最后一節(jié)中專門介紹。

CupertinoScrollbar是 iOS 風(fēng)格的滾動(dòng)條，如果你使用的是Scrollbar，那么在iOS平臺(tái)它會(huì)自動(dòng)切換為CupertinoScrollbar