Flutter 入門 — Container 屬性詳解

黃馬發表於2018-07-04

new Container(
  constraints: new BoxConstraints.expand(
    height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
  ),
  padding: const EdgeInsets.all(8.0),
  color: Colors.teal.shade700,
  alignment: Alignment.center,
  child: new Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),
  foregroundDecoration: new BoxDecoration(
    image: new DecorationImage(
      image: new NetworkImage('https://www.example.com/images/frame.png'),
      centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),
  transform: new Matrix4.rotationZ(0.1),
)
複製程式碼

一個好的元件是一個可以配置padding、位置、尺寸的元件.

官方文件連結

而container元件通常用來包裹子元件，而且可以配置一些樣式屬性。

假如Container元件沒有子元件，它會自動填充給定區域，否則他講佔據子元件大小的區域

注意：container元件不應該單獨使用，而是應該有個父元件。你可以是用Center元件、Padding元件、Column元件、Row元件或者Scaffold元件充當父元件。

開始

我們從一個空的Container元件開始，給他color屬性賦值為綠色:Colors.green.container 元件將充滿整個螢幕。

Center(
  child: Container(
    color: Colors.green,
  ),
);
複製程式碼

現在給container元件新增一個子元件。

Center(
  child: Container(
    color: Colors.green,
    child: Text("Flutter CheatSheet."),
  ),
);
複製程式碼

可以看到，container只佔據了子元件的大小。

Color 屬性

可以通過color設定Container元件的背景顏色。

You will use the Color Class or Colors Class with the color property like below: 可以是用Color或者Colors類給color屬性賦值，如下：

Colors 類

use Colors Class with the color name 使用Colors類點顏色的名字賦值。

Center(
  child: Container(
    color: Colors.green,
  ),
);
複製程式碼

You can add a shade also 也可以新增陰影

Center(
  child: Container(
    color: Colors.green[400],
  ),
);
複製程式碼

或者是如下的寫法

Center(
  child: Container(
    color: Colors.green.shade400,
  ),
);
複製程式碼

Color 類

使用8個16進位制數數而不是6個，加入你使用6個，這樣會導致最前面兩位假定為0，也具以為這是完全透明的。

Color(0xFFFFFF); // 不可見的
Color(0xFFFFFFFF); //  可見的
複製程式碼

你可以使用 .fromARGB(A = Alpha or 透明度, R = Red, G = Green, B = Blue)方法，引數可以是整數或者十六進位制的顏色值。

Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);
Color.fromARGB(255, 66, 165, 245);
複製程式碼

可以是用.fromRGBO (R = Red, G = Green, B = Blue, O = Opacity)方法，引數是整數顏色值。

Color c = const Color.fromRGBO(66, 165, 245, 1.0);
複製程式碼

Child 屬性

給container提供一個子元件，container的大小和子元件相同

container只能有一個子元件。如果想佈局多個子元件，可以使用例如Row、Column或者Stack元件，他們有children屬性，可以將元件新增到children中。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    child: new Text("Flutter Cheatsheet"),
  ),
);
複製程式碼

Alignment 屬性

為了對齊子元件，我們可使用Alignment類給alignment屬性賦值。

Alignment 有兩個引數x和y

Alignment(0.0, 0.0)代表整個長方形的中心。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    child: new Text("Flutter Cheatsheet",
      style: TextStyle(
        fontSize: 10.0
      ),
    ),
    alignment: Alignment(0.0, 0.0),
  ),
);
複製程式碼

Alignment(-1.0, -1.0)代表左上角

Alignment(1.0, 1.0)代表右下角

下圖顯示的是XY座標系

你也可以是用Alignment的常量

Alignment.bottomCenter：指底邊中點，和Alignment(0.0, 1.0)相同。

Alignment.bottomLeft：左下角，同Alignment(-1.0, 1.0)

Alignment.bottomRight :右下角，同Alignment(1.0, 1.0)

Alignment.center：中點，同 Alignment(0.0, 0.0)

Alignment.centerLeft：左邊中點，同Alignment(-1.0, 0.0)

Alignment.centerRight 右邊中點，同Alignment(1.0, 0.0)

Alignment.topCenter：定邊中點，同Alignment(0.0, -1.0)

Alignment.topLeft：左上角，同 Alignment(-1.0, -1.0)

Alignment.topRight：右上角，同Alignment(1.0, -1.0)

你也可以使用FractionalOffset類給alignment屬性賦值。

FractionalOffset 和 Alignment 代表相同資訊的不同表示：相對於矩形大小的矩形內的位置。兩個類之間的區別在於它們用於表示位置的座標系。

FractionalOffset的原點在左上角，而Alignment在中心點。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    child: new Text("Flutter Cheatsheet",
      style: TextStyle(
        fontSize: 20.0
      ),
    ),
    alignment: FractionalOffset(0.5, 0.5),
  ),
);
複製程式碼

你也可以使用FractionalOffset類的常量

FractionalOffset.bottomCenter :表示底邊中點，依次類推：

FractionalOffset.bottomLeft 等於 FractionalOffset(0.0, 1.0)

FractionalOffset.bottomRight 等於 FractionalOffset(1.0, 1.0)

FractionalOffset.center 等於 FractionalOffset(0.5, 0.5)

FractionalOffset.centerLeft 等於 FractionalOffset(0.0, 0.5)

FractionalOffset.centerRight 等於 FractionalOffset(1.0, 0.5)

FractionalOffset.topCenter 等於 FractionalOffset(0.5, 0.0)

FractionalOffset.topLeft 等於 FractionalOffset(0.0, 0.0)

FractionalOffset.topRight 等於 FractionalOffset(1.0, 0.0)

你也可以使用AlignmentDirectional類

表達和Size相關的偏移量，其中水平方向和書寫方向有關。

在TextDirection.ltr中表示距離左邊的距離，當TextDirection.rtl中表示距離右邊的距離，而且開發這不需要關注書寫的方向。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    child: new Text("Flutter Cheatsheet",
      style: TextStyle(
        fontSize: 20.0
      ),
    ),
    alignment: AlignmentDirectional(0.0, 0.0),
  ),
);
複製程式碼

你也可以使用AlignmentDirectional類的常量。

AlignmentDirectional.bottomCenter：底邊中點

AlignmentDirectional.bottomEnd:右下角

AlignmentDirectional.bottomStart:左下角

AlignmentDirectional.center：垂直中心點

AlignmentDirectional.centerEnd：右邊中點

AlignmentDirectional.centerStart：左邊中點

AlignmentDirectional.topCenter：上邊中點

AlignmentDirectional.topEnd：右上角

AlignmentDirectional.topEnd : 左上角

以上都說明都在是TextDirection.ltr中，一次類推

Constraints 屬性

constraint 屬性是指定元件佔據空間大小的屬性。大多陣列件或者UI都可以是用簡單的BoxConstraint構建。

一個BoxConstraint只關注minWidth、 maxWidth、 minHeight 和 maxHeight。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      constraints: BoxConstraints(
          maxHeight: 300.0,
          maxWidth: 200.0,
          minWidth: 150.0,
          minHeight: 150.0
      ),
    ),
  ),
);
複製程式碼

正如之前我們提到的，假如container沒有子元件，他將自動填充給定的控制元件，因為我們給定了max-width 和 max-height，所以只能佔據max-width 和 max-height指定的空間。

現在給container新增 Text控制元件。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      child: Text("Flutter"),
      constraints: BoxConstraints(
          maxHeight: 300.0,
          maxWidth: 200.0,
          minWidth: 150.0,
          minHeight: 150.0
      ),
    ),
  ),
);
複製程式碼

因為現在container有了子元件，本應該container佔據子元件大小的空間，但是因為我們給定了 min-width 和 min-height，所以他只能佔據BoxConstraints所指定的空間。

我新增一個更長一些的text。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      child: Text("Flutter Cheatsheet Flutter Cheatsheet"),
      constraints: BoxConstraints(
          maxHeight: 300.0,
          maxWidth: 200.0,
          minWidth: 150.0,
          minHeight: 150.0
      ),
    ),
  ),
);
複製程式碼

如上圖所示，container擴充的空間不能超過max-width 和 the max-height的指定。

即使container有子元素，如果我們需要將container擴充套件到最大，我們可以使用BoxConstraints.expand()

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      child: Text("Flutter"),
      constraints: BoxConstraints.expand(),
    ),
  ),
);
複製程式碼

如圖所示，container沒有包裹子元素，而是擴充套件到最大。

而且你還可以指定寬高。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      child: Text("Flutter"),
      constraints: BoxConstraints.expand(
        width: 350.0,
        height: 400.0
      ),
    ),
  ),
);
複製程式碼

Margin 屬性

margin是一個給container周圍增加空間的屬性，一般通過EdgeInsets的常量。

EdgeInsets.all()

如果需要四周都新增margin。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      margin: new EdgeInsets.all(20.0),
    ),
  ),
);
複製程式碼

EdgeInsets.symmetric()

如果你只是想在上下或者左右新增margin。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      margin: new EdgeInsets.symmetric(
        vertical: 20.0,
        horizontal: 50.0
      ),
    ),
  ),
);
複製程式碼

EdgeInsets.fromLTRB()

如果需要從左側，頂部，右側和底部的偏移量新增margin。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      margin: new EdgeInsets.fromLTRB(20.0, 30.0, 40.0, 50.0),
    ),
  ),
);
複製程式碼

EdgeInsets.only()

如果你想通過非零值新增margin。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      margin: new EdgeInsets.only(
        left: 20.0,
        bottom: 40.0,
        top: 50.0
      ),
    ),
  ),
);
複製程式碼

Padding Property

通過和margin一樣的EdgeInsets常量值，在container的內部新增空白空間。

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      margin: new EdgeInsets.only(
          left: 20.0,
          bottom: 40.0,
          top: 50.0
      ),
      padding: new EdgeInsets.all(40.0),
      color: Colors.green,
      child: Text("Flutter Cheatsheet"),
      constraints: BoxConstraints.expand(),
    ),
  ),
);
複製程式碼

Decoration Property

decoration屬性作用於子元件之下。

屬性的值可以是如下的類：

BoxDecoration 類
FlutterLogoDecoration 類
ShapeDecoration 類
UnderlineTabIndicator 類

我們將在其他的文章中討論上面的類

ForegroundDecoration 屬性

decoration 屬性作用於子元素之上。