Flutter之Container詳解

1 基本內容
1.1 繼續關係
Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container
注：全部控件都是Widget的子類！

1.2 介紹
一個便利的控件，結合了常見的繪畫，定位和大小調整。

1.3 行爲
因爲Container結合了許多其餘Widget，每一個Widget都有本身的佈局行爲，所以Container的佈局行爲有點複雜。

依次是：

1.採用alignment

2.以child調整自身大小

3. 採用了width，height和constraints

4.擴大以適應父Widget

5.要儘量小

具體狀況來講：

1· 若是Container沒有子Widget，沒有height，沒有width，沒有constraints，而且父窗口提供無限制約束，則Container嘗試儘量小。

2· 若是Container沒有子Widget，沒有alignment，而是一個height，width或 constraints提供，Container試圖給出這些限制和父Widget的約束相結合，以儘量小。

3· 若是Container沒有子Widget，沒有height，沒有width，沒有constraints，沒有alignment，可是父窗口提供了有界約束，那麼Container會擴展以適應父窗口提供 的約束。

4· 若是Container具備alignment，而且父窗口提供無限制約束，則constraints會嘗試圍繞子Widget的alignment自身大小。

5· 若是Container具備alignment，而且父窗口提供有界約束，則constraints會嘗試展開以適合父窗口，而後根據alignment將子項置於其自身內。

6· Container具備子Widget，但沒有height，沒有width，沒有constraints，沒有alignment，將父級constraints傳遞給子級，自身調整大小。

2 構造方法講解
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,
}) : assert(margin == null || margin.isNonNegative),
assert(padding == null || padding.isNonNegative),
assert(decoration == null || decoration.debugAssertIsValid()),
assert(constraints == null || constraints.debugAssertIsValid()),
assert(color == null || decoration == null,
'Cannot provide both a color and a decoration\n'
'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'
)
各參數詳解

2.1 Key key：
您可使用key來控制框架將在widget重建時與哪些其餘widget匹配。默認狀況下，框架根據它們的runtimeType和它們的顯示順序來匹配。 使用key時，框架要求兩個widget具備相同的key和runtimeType。

Key在構建相同類型widget的多個實例時頗有用。例如，List構建足夠的ListItem實例以填充其可見區域：

若是沒有key，當前構建中的第一個條目將始終與前一個構建中的第一個條目同步，即便在語義上，列表中的第一個條目若是滾動出屏幕，那麼它將不會再在窗口中可見。

經過給列表中的每一個條目分配爲「語義」 key，無限列表能夠更高效，由於框架將同步條目與匹配的語義key並所以具備類似（或相同）的可視外觀。 此外，語義上同步條目意味着在有狀態子widget中，保留的狀態將附加到相同的語義條目上，而不是附加到相同數字位置上的條目。

2.2 AlignmentGeometry alignment:
若是父Widget尺寸大於child Widget尺寸，這個屬性設置會起做用，有不少種對齊方式。

AlignmentGeometry 是個抽象類

 

Alignment與AlignmentDirectional同樣的，只是命名不同，如Alignment中的topLeft跟AlignmentDirectional中的topStart一致。

Alignment主要如下對齊方式：

  /// The top left corner.
  static const Alignment topLeft = Alignment(-1.0, -1.0);

  /// The center point along the top edge.
  static const Alignment topCenter = Alignment(0.0, -1.0);

  /// The top right corner.
  static const Alignment topRight = Alignment(1.0, -1.0);

  /// The center point along the left edge.
  static const Alignment centerLeft = Alignment(-1.0, 0.0);

  /// The center point, both horizontally and vertically.
  static const Alignment center = Alignment(0.0, 0.0);

  /// The center point along the right edge.
  static const Alignment centerRight = Alignment(1.0, 0.0);

  /// The bottom left corner.
  static const Alignment bottomLeft = Alignment(-1.0, 1.0);

  /// The center point along the bottom edge.
  static const Alignment bottomCenter = Alignment(0.0, 1.0);
明顯看出構造方法中的二個參數範圍在[-1.0，1.0] 表示從頂部到底部或者從左到右

好比，想讓child在居中Alignment(0.0, 0.0)

FractionalOffset繼承Alignment

FractionalOffset構造方法能夠看出，方法中的二個參數範圍在[0.0，1.0]表示從頂部到底部或者從左到右

const FractionalOffset(double dx, double dy)
: assert(dx != null),
assert(dy != null),
super(dx * 2.0 - 1.0, dy * 2.0 - 1.0);
2.3 EdgeInsetsGeometry padding:
內邊距：本Widget邊框和內容區之間距離。

EdgeInsetsGeometry 是個抽象類：

 

同理：EdgeInsetsDirectional與EdgeInsets功能一致！

EdgeInsets比EdgeInsetsDirectional多了一個方法：

const EdgeInsets.all(double value)

      : left = value, top = value, right = value, bottom = value;

他們的經常使用方法

const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);

const EdgeInsetsDirectional.fromSTEB(this.start, this.top, this.end, this.bottom);

注意的是，四個參數都不能有負數

由於：限定了 assert(padding == null || padding.isNonNegative)

2.4 Color color:
Container背景色

通常經過 const Color(int value) : value = value & 0xFFFFFFFF; 建立對象，也可使用Colors類中的靜態成員，從value & 0xFFFFFFFF可看出，默認值會不透明的。

注意：

用來設置container背景色，若是foregroundDecoration設置的話，可能會遮蓋color效果。

container背景色和decoration不能同時設置，

由於：Container構造方法限定了assert(color == null || decoration == null,

         'Cannot provide both a color and a decoration\n'

         'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'

       )

2.5 Decoration decoration：
繪製背景圖案。

將在下一篇文章中詳細講解Decoration （邊框、圓角、陰影、形狀、漸變、背景圖像）

注意：

 container背景色和decoration不能同時設置

2.6 Decoration  foregroundDecoration：
decoration是背景，foregroundDecoration是前景。設置了foregroundDecoration可能會遮蓋child內容，通常半透明遮蓋（蒙層）效果使用！

將在下一篇文章中詳細講解Decoration （邊框、圓角、陰影、形狀、漸變、背景圖像等等）

2.7 width、height
width：container的寬度，設置爲double.infinity能夠強制在寬度上撐滿，不設置，則根據child和父節點二者一塊兒佈局。

height：container的高度，設置爲double.infinity能夠強制在高度上撐滿。

2.8 BoxConstraints constraints:
添加到child上額外的約束條件。

const BoxConstraints({
this.minWidth = 0.0,
this.maxWidth = double.infinity,
this.minHeight = 0.0,
this.maxHeight = double.infinity
});
明顯是來設置child的寬高範圍值。還有不少靜態方法，不一一列出，看源碼便可！

注意：

0.0表示最小，double.infinity爲無限大

2.9 EdgeInsetsGeometry margin:
外邊距：本Widget與父邊框的距離。

值與padding一致。

2.10 Matrix4 transform：
4D Matrix（矩陣）後面文章會詳解

3.0 Widget child:
控件內容widget。

3 效果及示例

代碼：

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: 'My app', // used by the OS task switcher
home: new MyStartUI(),
));
}

class MyStartUI extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
constraints: new BoxConstraints.expand(
height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
),
decoration: new BoxDecoration(
border: new Border.all(width: 2.0, color: Colors.red),
color: Colors.grey,
borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
image: new DecorationImage(
image: new NetworkImage('https://avatar.csdn.net/8/9/A/3_chenlove1.jpg'),
centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
),
),
padding: const EdgeInsets.all(5.0),
margin: const EdgeInsets.all(10.0),
alignment: Alignment.center,
child: new Text('Ying You Learning',
style: Theme.of(context).textTheme.display1.copyWith(color: Colors.red)),
transform: new Matrix4.rotationZ(0.0),
);
}

原文：https://blog.csdn.net/chenlove1/article/details/83032767