Container

给子控件包裹一层 Container 属性，如大小，间距，对齐方式，背景颜色等等。

Container 和 SizedBox 区别

SizedBox 主要是控制子控件的宽和高，而 Container 显得更强大些，属性更多，比如还可以控制子控件的对齐方式，margin 和 padding，添加边框等等。另外两个继承的 Widget 对应不太一样，SizedBox 是 RenederObjectWidget 。而 Container 是 StatelessfulElement 。对应的 Element 和 RenderObject 也是不一样。具体看下面 UML 图

Container.png

Container 属性

1. alignment 子控件对齐方式

AlignmentDirectional.topStart
AlignmentDirectional.topCenter
AlignmentDirectional.topEnd
AlignmentDirectional.centerStart
AlignmentDirectional.center
AlignmentDirectional.centerEnd
AlignmentDirectional.bottomStart
AlignmentDirectional.bottomCenter
AlignmentDirectional.bottomEnd

2. decoration
   不能和 color 属性同时设置。decoration 也是设置背景，不过比 color 属性更强大，可以设置圆角，背景图片，边线，

decoration: new BoxDecoration(
                  color: Colors.red,//背景颜色，image 为空才显示
                  image: new DecorationImage(//背景图片
                      image:NetworkImage('https://cn.bing.com/th?id=OIP.xq1C2fmnSw5DEoRMC86vJwD6D6&pid=Api&rs=1')),
                 // borderRadius: BorderRadius.all(Radius.circular(10)),
                  border: new Border.all(//边线颜色和宽度
                    color: Colors.blue,
                    width: 2.0,
                  ),
                boxShadow:<BoxShadow>[//阴影渐变颜色，深度
                  new BoxShadow (
                    color: const Color(0xcc000000),
                    offset: new Offset(0.0, 2.0),
                    blurRadius: 4.0,
                  ),
                  new BoxShadow (
                    color: const Color(0x80000000),
                    offset: new Offset(0.0, 6.0),
                    blurRadius: 20.0,
                  ),
                ],
                gradient:new LinearGradient(//背景渐变颜色，image 属性为 null 才有用
                  begin: const Alignment(0.0, -1.0),
                  end: const Alignment(0.0, 0.6),
                  colors: <Color>[
                    const Color(0xffef5350),
                    const Color(0x00ef5350)
                  ],
                ),
                shape:BoxShape.circle,//控件形状，不能和 borderRadius 一起使用
              )

3. foregroundDecoration

和 Decoration 属性一样使用，背景显示在子控件上面。如图

foregroundDecoration.png

4. constraints

约束 Container 控件的最大和最小宽度和高度

constraints: BoxConstraints(
                minWidth: 300,
                minHeight: 300,
              ),

5. transform

控件旋转，缩放变化等。

旋转：

transform: new Matrix4.identity()
                ..rotateZ(15 * 3.1415927 / 180),

缩放：

new Matrix4.identity()
        ..scale(1.5)

还有 child ，width ，height ，属性这个就不用多说了。

new Container(
              alignment:AlignmentDirectional.topStart,
              width: 100,
              height: 100,
              //color: Colors.red,
              child: Text('Container 内容'),
              decoration: new BoxDecoration(
                  color: Colors.red,
                 // image: new DecorationImage(
                 //     image:NetworkImage('https://cn.bing.com/th?id=OIP.xq1C2fmnSw5DEoRMC86vJwD6D6&pid=Api&rs=1')),
                 // borderRadius: BorderRadius.all(Radius.circular(10)),
                  border: new Border.all(
                    color: Colors.blue,
                    width: 2.0,
                  ),
                boxShadow:<BoxShadow>[
                  new BoxShadow (
                    color: const Color(0xcc000000),
                    offset: new Offset(0.0, 2.0),
                    blurRadius: 4.0,
                  ),
                  new BoxShadow (
                    color: const Color(0x80000000),
                    offset: new Offset(0.0, 6.0),
                    blurRadius: 20.0,
                  ),
                ],
                gradient:new LinearGradient(
                  begin: const Alignment(0.0, -1.0),
                  end: const Alignment(0.0, 0.6),
                  colors: <Color>[
                    const Color(0xffef5350),
                    const Color(0x00ef5350)
                  ],
                ),
                shape:BoxShape.circle,
              ),
              constraints: BoxConstraints(
                minWidth: 300,
                minHeight: 300,
              ),
              transform: new Matrix4.identity()
                ..rotateZ(15 * 3.1415927 / 180),
            )