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

Flutter 中有兩種布局模型：

從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)服務(wù)體系，各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。成都創(chuàng)新互聯(lián)公司將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。

基于 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的列表按需加載模型”。可滾動(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

Flutter（56）：Layout組件之OverflowBox

對(duì)其子項(xiàng)施加不同約束的widget，它可能允許子項(xiàng)溢出父級(jí)。

下一節(jié)：Layout組件之SizedOverflowBox

2020-05-15 flutter BoxConstraints and layout

在出現(xiàn)布局錯(cuò)誤時(shí)能盡快找到錯(cuò)誤原因。

以下是對(duì)關(guān)鍵內(nèi)容的翻譯和注解。

flutter的布局模型是“一步布局模型”（one-pass layout model），在渲染樹中，向下treewalk傳遞給子 盒約束，然后再向上treewalk將計(jì)算好的幾何形狀(比如高度、寬度等)傳遞給父。我理解one-pass layout model就是一遍就將布局計(jì)算好。不會(huì)多次treewalk去計(jì)算布局，或多次重繪(repaint)并多次計(jì)算布局。

計(jì)算的好的幾何形狀必須符合盒約束的要求。

盒約束有四個(gè)值，minWidth,maxWidth,minHeight,maxHeight，符合盒約束的意思就是說 計(jì)算出的寬高必須在最大值和最小值之間 。

我猜測(cè)，在將盒約束向子傳遞的過程中，子會(huì)根據(jù)父的盒約束，設(shè)置自己的盒約束，而不是單純的繼承父的盒約束。稍后結(jié)合Flex布局可以解釋。

盒約束的最小值和最大值相等。因此在tight約束下的子的高寬將等于父的高寬，也就是說子是緊緊(tight)貼著父的。

盒約束的最小值為0，也就是說子可以是小于盒約束最大值的任何值，也就是說子是不緊貼(松的，loose)父的。

盒約束的最大值不是infinite(無窮大)

盒約束的最大值是infinite(無窮大)

盒約束的最小值是infinite(無窮大)，他的子的寬或高只能取無窮大。

子的寬高(Size)符合盒約束的要求。

以下摘抄原文檔并翻譯，并加以分析。為了關(guān)注要點(diǎn)， 忽略crossAxis方向(水平方向)的處理 。

以下圖為Column布局實(shí)例。

給column布局進(jìn)行了以下6步操作

首先給每個(gè)非flex子元素，設(shè)置豎直方向unbounded(無界)的盒約束。結(jié)合圖片，也就是將1、2兩個(gè)子設(shè)置好豎直方向無界的盒約束。示例中1和2設(shè)置了高度，因此一共占用高度是5+3=8.

按flex的比例給flex元素分配剩余的空間。因?yàn)槭纠挥幸粋€(gè)flex元素，即3號(hào)元素，因此將占有剩余全部空間，高度是20-5-3 = 12。

在第二步中分配好空間的flex元素，給他設(shè)置的盒約束不是豎直方向unbounded(給非flex元素設(shè)置的是豎直方向unbounded)，而是有界的盒約束，盒約束的maxHeight是12，即第二步中被分配的高度。

水平方向不解釋了。高度設(shè)置完了他去設(shè)置寬度。

Column組件的總高度是由mainAxisSize屬性決定的，如果值是MainAxisSize.max，Column的高度就是Column的盒約束的maxHeight值，示例中我們給Column設(shè)置了高度為20的bounded盒約束，假設(shè)Column.mainAxisSize=MainAxisSize.max,那么Column的高度就是20.如果mainAxisSize=MainAxisSize.min，Column的高度將由其子元素的高度和決定。假設(shè)3號(hào)flex元素不設(shè)置成flex元素，而是固定高度為8，那么Column的高度就是5+3+8=16.

設(shè)置子元素的位置，即設(shè)置靠左，靠右，居中，分散等，與本示例關(guān)系不大。

根據(jù)第一步，inner column被outer column設(shè)置了無界(unbounded)的盒約束，Column會(huì)緊包c(diǎn)hildren，而inner column的Expanded要撐開以占用inner column的剩余空間，這就沖突了。

解決方案:給inner column設(shè)置有界的盒約束即可。比如給inner column外包一層有高度的Container。

下面這種方案，給inner column包一層Expanded也可以，是因?yàn)樵趏uter column中，Expanded會(huì)被設(shè)置成有界的盒約束(結(jié)合第三步)，因此Expanded就可以向外擴(kuò)展(expand)了。

網(wǎng)站欄目：flutterbox的簡(jiǎn)單介紹
標(biāo)題網(wǎng)址：http://www.chinadenli.net/article40/dsdeeeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、用戶體驗(yàn)、品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站制作、響應(yīng)式網(wǎng)站、面包屑導(dǎo)航

廣告

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