Flutter 容器盒子模型詳解

在網頁開發中，有盒子模型，號稱統一三端的 Flutter 也不例外，而且和 HTML 的盒子模型幾乎是一樣的，本篇文章通過簡單的例子說明一下 Flutter 的盒子模型，方便以後再做界面時可以更好的理解佈局。

在講 Flutter 的盒子模型前，先看看HTML 中的盒子模型。如下圖所示，一個頁面元素包括了與父級容器的外邊距（margin），自身內容與邊框的內邊距（padding）。外邊距 和內邊距都可以通過 LTRB （左、上、右、下）單獨設定四個方向的大小。

Flutter 的盒子模型和 HTML 的是一樣的，而通用的容器 Container 就相當於是一個通用的容器，和 HTML 的 div 標籤一樣。如果要控制一個元素的尺寸，外邊距，內邊距和邊框，最通用的做法是使用 Container 容器將元素包裹。當然 Flutter 也提供了一些更爲具體的佈局組件方便開發，例如 ：

• SizedBox：指定尺寸的容器。
• ConstaintedBox：帶約束條件的容器，如限制最小最大寬度和高度。
• DecoratedBox：帶裝飾的容器，比如漸變色。
• RotatedBox：旋轉一定角度的容器。

上面這些組件實際都可以通過 Container 的參數設置完成，只是開發的時候使用具體的容器可以減少組件參數。

樣例代碼

下面就使用一個具體的例子來說明盒子模型的具體概念，由於這裏不涉及數據變化引起界面變化，因此直接使用 Stateless 無狀態組件，代碼如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 盒子模型',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('盒子模型'),
        ),
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            color: Colors.blue,
            child: Container(
              color: Colors.red,
              margin: EdgeInsets.fromLTRB(10, 0, 20, 30),
              child: Container(
                margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
                color: Colors.white60,
                child: Text('這是一長段文字，這是一長段文字,這是一長段文字，這是一長段文字,這是一長段文字，這是一長段文字'),
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

這裏在 body裏的組件層級如下：

• Center：居中組件。
  • Container：300 x 300大小，顏色爲藍色，爲最外層組件。
    • Container：沒指定大小（通過盒子模型約束控制大小），與父級組件的外邊距爲左10，上0，右20，下30，顏色爲紅色。
      • Container：沒指定大小，與父級組件的上下左右外邊距均爲10，內邊距上下左右均爲10，顏色爲白色。
        • Text：顯示多行文本，用於展示內邊距效果。

運行後的界面如下圖所示，可以看到和預期一致。