Flutter 入門與實戰（二）：容器的盒子模型

島上碼農發表於2021-05-16
Flutter模型

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

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

image.png

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：顯示多行文字，用於展示內邊距效果。

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

盒子模型.jpg

相關文章