前言

在 Flutter 中，一個完整的界面通常就是由這些小型、單用途的基本控件元素依據特定的布局規則堆砌而成的。搭建出一個漂亮的布局，需要了解布局規則，以及這些規則與其他平臺類似概念的差別。

在 Flutter 中一切皆 Widget，那么布局也不例外。但與基本控件元素不同，布局類的 Widget 并不會直接呈現視覺內容，而是作為承載其他子 Widget 的容器。

這些布局類的 Widget，內部都會包含一個或多個子控件，并且都提供了擺放子控件的不同布局方式，可以實現子控件的對齊、嵌套、層疊和縮放等。而我們要做的就是，通過各種定制化的參數，將其內部的子 Widget 依照自己的布局規則放置在特定的位置上，最終形成一個漂亮的布局。

Flutter 提供了 31 種布局 Widget，對布局控件的劃分非常詳細，一些相同（或相似）的視覺效果可以通過多種布局控件實現，因此布局類型相比原生 Android、iOS 平臺多了不少。比如，Android 布局一般就只有 FrameLayout、LinearLayout、RelativeLayout、GridLayout 和 TableLayout 這 5 種，而 iOS 的布局更少，只有 Frame 布局和自動布局兩種。

為了建立起對布局類 Widget 的認知，了解基本布局類 Widget 的布局特點和用法，從而學以致用快速上手開發，將對幾類在開發 Flutter 應用時，最常用也最有代表性的布局 Widget，包括單子 Widget 布局、多子 Widget 布局、層疊 Widget 布局，進行學習。

（一）單子 Widget 布局：Container、Padding 與 Center

單子 Widget 布局類容器比較簡單，一般用來對其唯一的子 Widget 進行樣式包裝，比如限制大小、添加背景色樣式、內間距、旋轉變換等。這一類布局 Widget，包括 Container、Padding 與 Center 三種。

（1）Container

Container 是一種允許在其內部添加其他控件的控件，也是 UI 框架中的一個常見概念。

在 Flutter 中，Container 本事可以單獨作為控件存在（比如設置背景色、寬度），也可以作為其他控件的父級存在：Container 可以定義布局過程中子 Widget 如何擺放，以及如何展示。與其他框架不同的是，Flutter 的 Container 僅能包含一個子 Widget。

所以，對于多個子 Widget 的布局場景，我們通常會這樣處理：先用一個根 Widget 去包裝這些子 Widget，然后把這個根 Widget 放到 Container 中，再由 Container 設置它的對齊 alignment、邊距 padding 等基礎屬性和樣式屬性。

代碼如下所示：

body: Container(
  child: Text('Container（容器）在 UI 框架中是一個很常見的概念，Flutter 也不例外。'),
  // 內邊距
  padding: EdgeInsets.all(18.0),
  // 外邊距
  margin: EdgeInsets.all(44.0),
  width: 180.0,
  height: 240,
  // 子 Widget 居中對齊
  alignment: Alignment.center,
  //Container 樣式
  decoration: BoxDecoration(
    color: Colors.red, // 背景色
    borderRadius: BorderRadius.circular(10.0), // 圓角邊框
  ),
)

Container 示例

在需要設置內容間距時，我們可以通過 EdgeInsets 的不同構造函數，分別制定四個方向的不同補白方式，如均使用同樣數值留白、只設置左留白或對稱方向留白等。

接下來，我們再來看看單子 Widget 布局容器中另一個常用的容器 Center。正如它的名字一樣，Center 會將其子 Widget 居中排列。

需要注意的是，為了實現居中布局，Center 所占據的空間一定要比其子 Widget 要大才行，這也是顯而易見的：如果 Center 和其子 Widget 一樣大，自然就不需要居中，也沒空間居中了。因此 Center 通常會結合 Container 一起使用。

代碼如下所示：

body: Container(
  child: Center(
    child: Text('Container（容器）在 UI 框架中是一個很常見的概念，Flutter 也不例外。'),
  ),
  // 內邊距
  padding: EdgeInsets.all(18.0),
  // 外邊距
  margin: EdgeInsets.all(44.0),
  width: 180.0,
  height: 240,
  //Container 樣式
  decoration: BoxDecoration(
    color: Colors.red, // 背景色
    borderRadius: BorderRadius.circular(10.0), // 圓角邊框
  ),
)

可以看到，我們通過 Center 容器實現了 Container 容器中alignment: Alignment.center的效果。

事實上，為了達到這一效果，Container 容器與 Center 容器底層都依賴了同一容器 Align，通過它實現子 Widget 的對齊方式。

（二）多子 Widget 布局：Row、Column 與 Expanded

對于擁有多個子 Widget 的布局類容器而言，其布局行為無非就是兩種規則的抽象：水平方向上應該如何布局、垂直方向上應該如何布局。

如同 Android 的 LinearLayout、前端的 Flex 布局一樣，Flutter 中也有類似的概念，即將子 Widget 按行水平排列的 Row，按列垂直排列的 Column，以及負責分配這些子 Widget 在布局方向（行 / 列）中剩余空間的 Expanded。

Row 與 Column 的使用方法很簡單，我們只需要將各個子 Widget 按序加入到 children 數組即可。在下面的代碼中，把 4 個分別設置了不同的顏色和寬高的 Container 加到 Row 與 Column 中：

//Row 的用法示范
Row(
  children: <Widget>[
    Container(color: Colors.yellow, width: 60, height: 80,),
    Container(color: Colors.red, width: 100, height: 180,),
    Container(color: Colors.black, width: 60, height: 80,),

    Container(color: Colors.green, width: 60, height: 80,),
  ],
)

//Column 的用法示范
Column(
  children: <Widget>[
    Container(color: Colors.yellow, width: 60, height: 80,),
    Container(color: Colors.red, width: 100, height: 180,),
    Container(color: Colors.black, width: 60, height: 80,),
    Container(color: Colors.green, width: 60, height: 80,),
  ],
)

Row 示例

Column 示例

單純使用 Row 和 Column 控件，在子 Widget 的尺寸較小時，無法將容器填滿。對于這樣的場景，可以通過 Expanded 控件，來制定分配規則填滿容器的剩余空間。

比如，我們希望 Row 組件（或 Column 組件）中的綠色容器與黃色容器均分剩下的空間，于是就可以設置它們的彈性系數參數 flex 都為 1，這兩個 Expanded 會按照其 flex 的比例（即 1：1）來分割剩余的 Row 橫向（Column 縱向）空間：

Row(
  children: <Widget>[
    Expanded(flex: 1, child: Container(color: Colors.yellow, height: 60)), // 設置了 flex=1，因此寬度由 Expanded 來分配
    Container(color: Colors.red, width: 100, height: 180,),
    Container(color: Colors.black, width: 60, height: 80,),
    Expanded(flex: 1, child: Container(color: Colors.green,height: 60),) // 設置了 flex=1，因此寬度由 Expanded 來分配
  ],
)

Expanded 控件示例

（三）層疊 Widget 布局：Stack 與 Positioned

有些時候，需要讓一個控件疊加在另一個控件的上面，比如在一張圖片上放置一段文字，又或者是在圖片的某個區域放置一個按鈕。這時候，我們就需要用到層疊布局容器 Stack 了。

Stack 容器與前端中的絕對定位布局非常類似，子 Widget 之間允許疊加，還可以根據父容器上、下、左、右四個角的位置來確定自己的位置。

Stack 提供了層疊布局的容器，而 Positioned 則提供了設置子 Widget 的位置的能力。

代碼如下所示：

Stack(
  children: <Widget>[
    Container(color: Colors.yellow, width: 300, height: 300),// 黃色容器
    Positioned(
      left: 18.0,
      top: 18.0,
      child: Container(color: Colors.green, width: 50, height: 50),// 疊加在黃色容器之上的綠色控件
    ),
    Positioned(
      left: 18.0,
      top:70.0,
      child: Text("Stack 提供了層疊布局的容器 "),// 疊加在黃色容器之上的文本
    )
  ],
)

Stack 與 Positioned 容器示例

可以看到，三個子 Widget 都疊加在一起了。

Stack 控件允許其子 Widget 按照創建的先后順序進行層疊擺放，而 Positioned 控件則用來控制這些子 Widget 的擺放位置。需要注意的是，Positioned 控件只能在 Stack 中使用，在其他容器中使用會報錯。

總結

Flutter 的布局容器強大而豐富，可以將小型、單用途的基本視覺元素快速封裝成控件。