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

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

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

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

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