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.****.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),
);
}
}
4 学习来自
1.https://docs.flutter.io/flutter/widgets/Container-class.html
2.Dart源码