# 布局類Widget ## 簡介 布局類Widget都會包含一個或多個子widget，不同的布局類Widget對子widget排版(layout)方式不同。我們在前面說過Element樹才是最終的繪制樹，Element樹是通過widget樹來創建的（通過`Widget.createElement()`），widget其實就是Element的配置數據。Flutter中，根據Widget是否需要包含子節點將Widget分為了三類，分別對應三種Element，如下表： Widget對應的Element用途LeafRenderObjectWidgetLeafRenderObjectElementWidget樹的葉子節點，用于沒有子節點的widget，通常基礎widget都屬于這一類，如Text、Image。SingleChildRenderObjectWidgetSingleChildRenderObjectElement包含一個子Widget，如：ConstrainedBox、DecoratedBox等MultiChildRenderObjectWidgetMultiChildRenderObjectElement包含多個子Widget，一般都有一個children參數，接受一個Widget數組。如Row、Column、Stack等> 注意，Flutter中的很多Widget是直接繼承自StatelessWidget或StatefulWidget，然后在`build()`方法中構建真正的RenderObjectWidget，如Text，它其實是繼承自StatelessWidget，然后在`build()`方法中通過RichText來構建其子樹，而RichText才是繼承自LeafRenderObjectWidget。所以為了方便敘述，我們也可以直接說Text屬于LeafRenderObjectWidget（其它widget也可以這么描述），這才是本質。讀到這里我們也會發現，其實**StatelessWidget和StatefulWidget就是兩個用于組合Widget的基類，它們本身并不關聯最終的渲染對象（RenderObjectWidget）**。 布局類Widget就是指直接或間接繼承(包含)MultiChildRenderObjectWidget的Widget，它們一般都會有一個children屬性用于接收子Widget。我們看一下繼承關系 Widget > RenderObjectWidget > (Leaf/SingleChild/MultiChild)RenderObjectWidget 。RenderObjectWidget類中定義了創建、更新RenderObject的方法，子類必須實現他們，關于RenderObject我們現在只需要知道它是最終布局、渲染UI界面的對象即可，也就是說，對于布局類Widget來說，其布局算法都是通過對應的RenderObject對象來實現的，所以讀者如果對接下來介紹的某個布局類Widget原理感興趣，可以查看其RenderObject的實現，而在本章中，為了讓讀者對布局類Widget有個快速的認識，所以我們不會深入到RenderObject的細節中區。在學習本章時，讀者的重點是掌握不同布局類Widget的布局特點，具體原理和細節我們會在后面高級部分介紹。