Flutter 入門 — Container 屬性詳解

Dart4Flutter - 01 – 變量、類型和函數

Dart4Flutter – 02 –控制流 和異常

Dart4Flutter – 03 – 類和泛型

Dart4Flutter – 04 – 異步和庫

Dart4Flutter - 拾遺01 - flutter-dart環境搭建

Dart4Flutter - 不可變性

Flutter入門 - 狀態管理

Flutter 入門實例1

Flutter 入門 - Container 屬性詳解

Flutter 入門-本地訪問-MethodChannel

Flutter 實例 - 加載更多的ListView

Flutter 實例 - 從本地到Flutter通訊 - Event Channels

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 屬性做用於子元素之上。

屬性的值能夠是以下的類：

• BoxDecoration 類
• FlutterLogoDecoration 類
• ShapeDecoration 類
• UnderlineTabIndicator 類 咱們將在其餘的文章中討論上面的類

Transform 屬性

在佈局時對容器執行轉換。 咱們使用Matrix Class做爲值

Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      padding: new EdgeInsets.all(40.0),
      color: Colors.green,
      child: Text("Flutter Cheatsheet"),
      transform: new Matrix4.rotationZ(0.5)
    ),
  ),
);
複製代碼

咱們將在其餘的文章中討論Matrix類。

歡迎你們討論

參考

• flutterdoc.com/widgets-con…
• medium.com/flutterflak…
• docs.flutter.io/flutter/wid…
• medium.com/jlouage/con…