前面的部落格中我們介紹了一些常用的Flutter控制元件例如 文字控制元件，按鈕控制元件，圖片控制元件等並且單獨的用了用、
但是，在開發過程中，我們的這些基本控制元件一般都是要放到佈局中按照一定的順序及距離進行排列以達到我們想要的效果。
類似於Android中的LinearLayout、RelativeLayout、FrameLayout等
所以，本期我們來看看佈局類的控制元件。

在Flutter中，佈局類控制元件大致分為以下兩種
1. 只有一個子控制元件佈局控制元件（child）
2. 可以有多個子控制元件的佈局控制元件（children）

佈局類的控制元件有很多，可以看官網的介紹

只有單個子控制元件的佈局控制元件

只有一個子控制元件的佈局控制元件都有一個child屬性，用於接收子控制元件，不同容器類的控制元件屬性不同，作用也不同

下面我們來看看常用的

Container

我們來著重看一下Container控制元件，這個可以說是功能最強大的，也是非常常用的佈局類控制元件了
首先我們來看一下其構造方法

  Container({
    Key key,
    this.alignment,		//對齊方式
    this.padding,		//內間距
    Color color,		//顏色
    Decoration decoration,	 //背景裝飾
    this.foregroundDecoration,  //前景裝飾
    double width,  //寬度
    double height, //高度
    BoxConstraints constraints,  /約束
    this.margin,  //外邊距
    this.transform,  //變換
    this.child,  //子控制元件
  })

可以看到，很多屬性跟之前的基礎控制元件屬性用法一致，我們先來簡單的用一用。

Container(
      width: 200,
      height: 100,
      color: Colors.cyan,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 20,
          color: Colors.white,
        ),
      ),
    );

長這樣。

下面我們來看看之前沒有用過的屬性

decoration
翻譯後叫做“裝飾器”，這個屬性就是用來設定背景樣式的，用decoration來設定樣式可以更加的多樣化。
decoration接收一個Decoration型別的值，Decoration是一個抽象類。
其繼承關係如下，其中BoxDecoration和ShapeDecoration是配合Container使用的，而BoxDecoration中的功能比較齊全，基本上包含了ShapeDecoration中的所有屬性，所以我們重點看一下BoxDecoration即可

BoxDecoration
先來看看其構造方法

const BoxDecoration({
    this.color,    //顏色
    this.image,   //圖片
    this.border,  //邊框
    this.borderRadius,   //邊角
    this.boxShadow,   //陰影
    this.gradient,   //漸變
    this.backgroundBlendMode,//背景混合模式
    this.shape = BoxShape.rectangle, //形狀
  })

我們可以設定顏色，圖片，邊框，漸變，形狀等，需要注意的是如果在decoration中設定了顏色或圖片，那麼container自身的color就不要設定了，不然會衝突

Container(
      width: 200,
      height: 100,
      alignment: Alignment.center,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.blueAccent, width: 1),
          boxShadow: [BoxShadow(color: Colors.redAccent, offset: Offset(2, 2))],
          gradient: LinearGradient(
            colors: [Colors.orangeAccent, Colors.redAccent, Colors.red],
          ),
          shape: BoxShape.circle),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 20,
          color: Colors.black,
        ),
      ),
    );

foregroundDecoration
前景裝飾，一般foregroundDecoration和decoration不會同時使用，其使用方式跟decoration一致

Container(
      width: 200,
      height: 100,
      alignment: Alignment.center,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      foregroundDecoration: BoxDecoration(
          shape: BoxShape.rectangle,
          gradient: LinearGradient(colors: [
            Colors.blueAccent,
            Colors.redAccent,
          ])),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 20,
          color: Colors.black,
        ),
      ),
    );

constraints
其值是BoxConstraints型別的，主要是用來限制Container的寬高，一般用來設定最大最小寬高度。

Container(
      width: 200,
      height: 100,
      color: Colors.blueAccent,
      alignment: Alignment.center,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      constraints: BoxConstraints(
        maxWidth: 100,
        maxHeight: 50,
      ),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 20,
          color: Colors.black,
        ),
      ),
    );

transform
變換，該屬性可以設定旋轉、平移、縮放。接收一個Matrix4型別的值，Matrix4中的方法有很多，也比較複雜，建議還是多看看API，都試一下。

Container(
      width: 200,
      height: 100,
      color: Colors.blueAccent,
      alignment: Alignment.center,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(10),
      transform: Matrix4.skewX(10),
      child: Text(
        "Container",
        style: TextStyle(
          fontSize: 20,
          color: Colors.black,
        ),
      ),
    );

Container相對於其他佈局類容器時功能最齊全的一個，也就是說我們可以使用Container代替大部分的單個子控制元件的其他佈局控制元件例如Padding、Center、ConstrainedBox等。這裡就不再介紹了，比較簡單，大家自行試一下就知道了。

下面我們來看看Container替代不了的其他控制元件

AspectRatio

這個控制元件可以通過設定寬高比來設定子控制元件的寬高

AspectRatio(
      aspectRatio: 3,//寬高比為3:1
      child: Container(
        color: Colors.blue,
        child: Text("AspectRatio"),
      ),
    );

FittedBox

該控制元件可以設定子控制元件的顯示模式，類似於圖片中的縮放模式

Container(
      color: Colors.redAccent,
      width: 200,
      height: 100,
      child: FittedBox(
        fit: BoxFit.fitWidth,
        child: Text("FittedBox"),
      ),
    );

Offstage

該控制元件可以控制顯示與隱藏， offstage: false即為隱藏，true為顯示

Offstage(
      offstage: false,
      child: Text("Offstage"),
    );

好了，單個子控制元件的佈局類控制元件大概就是這些，下一篇部落格我們看看可以有多個子控制元件的佈局類控制元件