flutter widget: container

Container是一个statelessWidget.Container是一个包含常见的绘画，定位和调整大小的widget.

image.png

Container 首先用padding包围子控件（在布局解析时解析任何带边界的控件的decoration属性值）,然后对填充范围应用附加约束（包括宽度和高度约束）. Container会被margin属性设置的空白边界约束.

在绘制过程中,container首先会应用设置的transform,然后绘制decoration以填充范围,再是绘制子控件,最后绘制foregroundDecoration,同时填充padded区域.

没有child的Container试图尽可能大，除非传入的约束是无边界的，在这种情况下，它们尽可能地小. 有child的Container, 构造函数的width，height和constraints参数会覆盖它。

2.Layout行为

有关框布局模型的介绍，请参阅BoxConstraints。
由于Container结合了许多其他小部件，每个小部件都有自己的布局行为，因此Container的布局行为有点复杂.

Container按这样的顺序：在响应alignment时，会调整自身大小来适应子项，在响应width，height和constraints时，以扩展以适合父级，尽可能小。

3.进一步说:

• 如果widget没有子节点，没有高度，没有宽度，没有约束，并且父节点提供无限制约束，则Container尝试尽可能小。
• 如果widget没有子对象并且没有提供对齐，但提供了高度，宽度或约束，那么在给定这些约束和父对象约束的组合的情况下，Container会尽可能小。
• 如果widget没有子节点，没有高度，没有宽度，没有约束，没有对齐，但父节点提供了有界约束，则Container会扩展以适应父节点提供的约束。
• 如果widget具有alignment，并且父窗口提供无限制约束，则Container会尝试围绕子窗口调整自身大小。
• 如果widget具有对齐，并且父窗口提供有界约束，则Container会尝试展开以适合父窗口，然后根据对齐方式将子项置于其自身内。
• 否则，widget具有子级但没有高度，没有宽度，没有约束，也没有对齐，并且Container将约束从父级传递给子级并调整其大小以匹配子级。
• padding和 margin属性对布局也起作用,正如上面描述的那些属性(他们的效果只是为了增加上面描述的规则).装饰可以隐式地增加padding（例如，BoxDecoration中的边框有可以对 padding起作用）；参见Decoration.padding.
  。

demo1

new Center(
  child: new Container(
    margin: const EdgeInsets.all(10.0),
    color: const Color(0xFF00FF00),
    width: 48.0,
    height: 48.0,
  ),
)

此示例显示了一个48x48绿色正方形（放置在Center小部件内部），并留有空白以便它远离相邻widget

demo2

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://flutter.io/images/homepage/screenshot-1.png'),
      centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),
  transform: new Matrix4.rotationZ(0.1),
)

这个例子展示了如何同时使用容器的许多特性。
constraints被设置为适合字体大小加上充足的净空垂直，同时水平扩展以适应父级。
padding是用来确保内容和文本之间有空格的。
color使盒子变淡了。
alignment会使孩子在框中居中。
foregroundDecoration在文本上覆盖一个图片。最后，
transform对整个装置施加轻微的旋转以完成效果。