Flutter 容器盒子模型的使用示例

更新時(shí)間：2021年05月19日 11:46:01 作者：島上碼農(nóng)

在網(wǎng)頁開發(fā)中，有盒子模型，號(hào)稱統(tǒng)一三端的 Flutter 也不例外，而且和 HTML 的盒子模型幾乎是一樣的，本篇文章通過簡(jiǎn)單的例子說明一下 Flutter 的盒子模型，方便以后再做界面時(shí)可以更好的理解布局。

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

Flutter 的盒子模型和 HTML 的是一樣的，而通用的容器 Container 就相當(dāng)于是一個(gè)通用的容器，和 HTML 的 div 標(biāo)簽一樣。如果要控制一個(gè)元素的尺寸，外邊距，內(nèi)邊距和邊框，最通用的做法是使用 Container 容器將元素包裹。當(dāng)然 Flutter 也提供了一些更為具體的布局組件方便開發(fā)，例如：

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

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

樣例代碼

下面就使用一個(gè)具體的例子來說明盒子模型的具體概念，由于這里不涉及數(shù)據(jù)變化引起界面變化，因此直接使用 Stateless 無狀態(tài)組件，代碼如下：

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('這是一長(zhǎng)段文字，這是一長(zhǎng)段文字,這是一長(zhǎng)段文字，這是一長(zhǎng)段文字,這是一長(zhǎng)段文字，這是一長(zhǎng)段文字'),
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

這里在 body里的組件層級(jí)如下：

Center：居中組件。
- Container：300 x 300大小，顏色為藍(lán)色，為最外層組件。
  - Container：沒指定大?。ㄍㄟ^盒子模型約束控制大小），與父級(jí)組件的外邊距為左10，上0，右20，下30，顏色為紅色。
  - Container：沒指定大小，與父級(jí)組件的上下左右外邊距均為10，內(nèi)邊距上下左右均為10，顏色為白色。
  - Text：顯示多行文本，用于展示內(nèi)邊距效果。

運(yùn)行后的界面如下圖所示，可以看到和預(yù)期一致。