前言
前面已经介绍了基本的组件使用，这篇博主主要介绍单一子元素组件（Single-child）。单一子元素组件包括Container，Padding，Center，Align，FittedBox以及AspectRatio等。
Container
在Flutter开发中，使用的最多的就是这个Container，因此我们必须牢牢掌握使用它的相关知识。
这里博主先介绍一下Container的对齐方式(alignment)，该属性接受Alignment对象。在其里面会传入两个参数，即double x和double y，取值范围都在[-1,1]之间，如下图所示：
从上图我们可以看出来，中间的位置X和Y都为0，它表示内容在Container里面正中间的位置。如果你想显示一段文字在中间，代码如下 ：
body: Container( color: Colors.red, alignment: Alignment(0.0, 0.0), child: new Text("Container",), ),
这里我们设置了背景色为红色，同时设置了文本的坐标为屏幕中间，如果你想把它设置到其他位置，更改Alignment的坐标值就可以了，上述代码实现效果如下：
从上面讲解的内容我们可以看出来，其坐标的值在[-1,1]之间，如果专门去记坐标的位置，会非常的麻烦，所以我们就需要用到Flutter提供的位置常量，如下所示：
Alignment.center==Alignment(0.0,0.0) Alignment.centerLeft==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) Alignment.bottomCenter==Alignment(0.0,1.0) Alignment.bottomLeft==Alignment(-1.0,1.0) Alignment.bottomRight==Alignment(1.0,1.0) Alignment.centerRight==Alignment(1.0,0.0)
Container的约束
有的时候，我们需要约束容器所占据的大小与空间。在大部分情况下，可以通过BoxConstraint来构建完成，BoxConstraint的属性如下：
属性 |
取值 |
| minWidth | 最小宽度 |
| minHeight | 最小高度 |
| maxWidth | 最大宽度 |
| maxHeight | 最大高度 |
我们先来看一段使用的代码：
body: Container( color: Colors.green, child: new Text("静歌很棒",), constraints: BoxConstraints( maxHeight: 400.0, maxWidth: 300.0, minHeight: 200.0, minWidth: 200.0, ), ),
如果使用如上代码，那么显示的效果将如下图所示：
有时候，我们需要把存储在child中的Container扩展到最大，值需要加入一些约束条件即可，代码如下：
body: Container( color: Colors.green, child: new Text("静歌很棒",), constraints: BoxConstraints.expand(width: 250.0,height: 100.0), ),
这里的显示效果如下图所示：
如果没有指定参数如下面代码所示，那么它将会占满整个屏幕的空间。：
constraints: BoxConstraints.expand()
在Container里面，我们可以也可以设置外边距margin和内边距padding，使用代码的方式如下：
body: Container( color: Colors.green, child: new Text("静歌很棒",), constraints: BoxConstraints.expand(width: 250.0,height: 100.0), margin: EdgeInsets.only(top: 60.0,left: 60.0), padding: EdgeInsets.only(top: 60.0,left: 60.0), ),
这里我们统一设置了外边距，内边距距离上左的距离都是60，显示的效果如下：
Container实战
下面我们来做一个有意思的东西，Container支持装饰器（Decoration），可以支持背景图线性或者径向渐变，也能支持边框，圆角，阴影等属性，下面是实现代码：
body: Container( constraints: BoxConstraints.tightFor(width: 300.0,height: 150.0), margin: EdgeInsets.only(top: 60.0,left: 80.0), decoration: BoxDecoration( border: Border.all(width: 3,color: Color(0xffaaaaaa)),//边框 //阴影效果 boxShadow: [ BoxShadow( color: Colors.black54, offset: Offset(2.0,2.0), blurRadius: 4.0 ), ], //实现渐变背景色，支持线性，径向渐变 gradient: LinearGradient( colors: [Colors.red,Colors.blue,Colors.yellow], ), ), transform: Matrix4.rotationZ(.3), alignment: Alignment.center, child: Text("我实现的线性渐变",style: TextStyle(color: Colors.white,fontSize: 33),), ),
这段代码其实也很好理解，先设置了其大小约束，然后设置其外边距，然后设置其装饰器，其中装饰器，先设置其边框效果宽3，颜色为0xffaaaaaa，然后设置阴影效果颜色为black54，阴影大小，模糊度，然后设置渐变颜色为红，绿，黄三色渐变，旋转，居中，添加文字，显示的效果如下：
