Flutter實(shí)戰(zhàn) 布局類組件簡(jiǎn)介

布局類組件都會(huì)包含一個(gè)或多個(gè)子組件，不同的布局類組件對(duì)子組件排版(layout)方式不同。我們?cè)谇懊嬲f過Element樹才是最終的繪制樹，Element樹是通過 Widget 樹來創(chuàng)建的（通過Widget.createElement()），Widget 其實(shí)就是 Element 的配置數(shù)據(jù)。在 Flutter 中，根據(jù) Widget 是否需要包含子節(jié)點(diǎn)將 Widget 分為了三類，分別對(duì)應(yīng)三種 Element，如下表：

注意，F(xiàn)lutter 中的很多 Widget 是直接繼承自 StatelessWidge t或 StatefulWidget，然后在build()方法中構(gòu)建真正的 RenderObjectWidget，如 Text，它其實(shí)是繼承自StatelessWidget，然后在build()方法中通過RichText來構(gòu)建其子樹，而 RichText 才是繼承自 MultiChildRenderObjectWidget。所以為了方便敘述，我們也可以直接說 Text 屬于 MultiChildRenderObjectWidget（其它 widget 也可以這么描述），這才是本質(zhì)。讀到這里我們也會(huì)發(fā)現(xiàn)，其實(shí) StatelessWidget 和 StatefulWidget 就是兩個(gè)用于組合 Widget 的基類，它們本身并不關(guān)聯(lián)最終的渲染對(duì)象（RenderObjectWidget）。

布局類組件就是指直接或間接繼承(包含)MultiChildRenderObjectWidget的 Widget，它們一般都會(huì)有一個(gè)children屬性用于接收子 Widget。我們看一下繼承關(guān)系 Widget > RenderObjectWidget > (Leaf/SingleChild/MultiChild)RenderObjectWidget 。

RenderObjectWidget類中定義了創(chuàng)建、更新RenderObject的方法，子類必須實(shí)現(xiàn)他們，關(guān)于RenderObject我們現(xiàn)在只需要知道它是最終布局、渲染 UI 界面的對(duì)象即可，也就是說，對(duì)于布局類組件來說，其布局算法都是通過對(duì)應(yīng)的RenderObject對(duì)象來實(shí)現(xiàn)的，所以讀者如果對(duì)接下來介紹的某個(gè)布局類組件的原理感興趣，可以查看其對(duì)應(yīng)的RenderObject的實(shí)現(xiàn)，比如Stack（層疊布局）對(duì)應(yīng)的RenderObject對(duì)象就是RenderStack，而層疊布局的實(shí)現(xiàn)就在RenderStack中。

在本章中，為了讓讀者對(duì)布局類 Widget 有個(gè)快速的認(rèn)識(shí)，所以我們并不會(huì)深入到RenderObject的細(xì)節(jié)中去。在學(xué)習(xí)本章時(shí)，讀者的重點(diǎn)是掌握不同布局組件的布局特點(diǎn)，具體原理和細(xì)節(jié)等我們對(duì) Flutter 整體入門后，感興趣的話再去研究。