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

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

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

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

樣例代碼

下面就使用一個具體的例子來說明盒子模型的具體概念，由于這里不涉及數(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('這是一長段文字，這是一長段文字,這是一長段文字，這是一長段文字,這是一長段文字，這是一長段文字'),
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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

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

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

以上就是Flutter 容器盒子模型的使用示例的詳細(xì)內(nèi)容，更多關(guān)于Flutter 容器的盒子模型的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論