介绍上一篇我们罗列了Flutter中所有的布局类，详细介绍了两种非常常用的布局：Row和Column。仅仅掌握以上两种基本布局是不够的。如果我们需要应付日常的布局使用，我们还需要多掌握一些布局组件。今天我们就来介绍一个强大的布局：容器布局。Container的使用Container是一个空白的容器，通常你可以使用Container来封装其他的widgets。那么为什么需要用Container封装widget呢？这是因为Container包含了一些特殊的功能。例如，可以在Container中设置背景颜色或者背景图片，可以设置padding、margins和borders。这为组件定制提供了很大的空间。先看一下Container的定义和构造函数：BoxConstraints?constraints,this.margin,this.transform,this.transformAlignment,this.child,this.clipBehavior=Clip.none,})可以看到Container是一个StatelessWidget，它的构造函数可以传入多个非常有用的Properties，用于控制Container的性能。Container中有padding、decoration、constraints、margin等与位置相关的内容。他们之间是什么关系？容器首先用padding包裹child，padding可以填充装饰。可以通过应用约束（例如宽度和高度）来限制填充的填充，然后可以用边距空白包裹这个组件。接下来，让我们看一个包含Column和Row的简单Container示例。首先构造一个包含Column的容器小部件：Widgetbuild(BuildContextcontext){returnContainer(decoration:constBoxDecoration(color:Colors.white,),child:Column(children:[buildBoxRow(),buildBoxRow(),],),);}这里为Container设置了一个BoxDecoration，用于指定Container的背景色。在Child中给定一个Column小部件，它的子对象是一个Row对象。部件buildBoxRow()=>Row(textDirection:TextDirection.ltr,children:[Container(width:100,child:Image.asset("images/head.jpg"))],);这是包含图像的容器对象的另一行。最后运行，我们可以得到如下界面：Container包含两行，每行包含一个Image对象。旋转Container默认情况下，Container是一个普通布局的widget，但是有时候我们可能需要实现一些特殊的效果，比如组件旋转，Container提供的transform属性可以很方便的做到这一点。对于Container，首先在组件绘制中应用transform。transform之后先画decoration，再画child，最后画foregroundDecoration。还是上面的例子，我们来试试transform属性是如何工作的。我们将transform属性添加到包含图像的容器中：WidgetbuildBoxRow()=>Row(textDirection:TextDirection.ltr,children:[Container(transform:Matrix4.rotationZ(0.2),width:100,child:Image.asset("图片/head.jpg"))],);生成的APP如下：可以看到图像已经沿Z轴旋转了。这里的旋转使用的是Matrix4.rotationZ，也就是沿Z轴选择。当然，你可以使用rotationX或rotationY分别沿X轴或Y轴旋转。如果选择rotationX，那么图像应该是这样的：其实Matrix4不仅可以沿单个轴旋转，还可以选择特定的向量方向进行选择。例如下面两个方法：///Translationmatrix.factoryMatrix4.translation(Vector3translation)=>Matrix4.zero()..setIdentity()..setTranslation(translation);///翻译matrix.factoryMatrix4.translationValues(doublex,doubley,doublez)=>Matrix4.zero()..setIdentity()..setTranslationRaw(x,y,z);Matrix4还可以在三个方向进行缩放，如下方法：///Scalematrix.factoryMatrix4.diagonal3Values(doublex,doubley,doublez)=>Matrix4.zero().._m4storage[15]=1.0.._m4storage[10]=z.._m4storage[5]=y.._m4storage[0]=x;有兴趣的朋友可以自己试试。Container中的BoxConstraints在Container中设置Constraints时，我们使用BoxConstraints。BoxConstraints有四个包含数字的属性，即minWidth、maxWidth、minHeight和maxHeight。所以BoxConstraints为这四个值提供了构造函数：constBoxConstraints({this.minWidth=0.0,this.maxWidth=double.infinity,this.minHeight=0.0,this.maxHeight=double.infinity,}):assert(minWidth!=null),assert(maxWidth!=null),assert(minHeight!=null),assert(maxHeight!=null);BoxConstraints还有两个构造函数：loose和tight：BoxConstraints.loose(Sizesize)BoxConstraints.tight(Sizesize)这两个有什么区别？如果轴的最小值为0，则BoxConstraints松散。如果一个轴的最大值和最小值相等，那么BoxConstraints是紧的。BoxConstraints中还有一个很常用的方法如下：BoxConstraints.expand({double?width,double?height})expand的意思是最大值和最小值都是无穷大，具体定义可以看方法的实现：constBoxConstraints.expand({double?width,double?height,}):minWidth=width??double.infinity,maxWidth=宽度??double.infinity,minHeight=height??double.infinity,maxHeight=height??双无穷大；总结Container是一个很常见的布局组件，大家都可以熟练使用。本文示例：https://github.com/ddean2009/learn-flutter.git更多信息请参考http://www.flydean.com/08-flutter-ui-layout-container/最通俗解读，最深入的干货，最简洁的教程，还有很多你不知道的小技巧等你来发现！欢迎关注我的公众号：《程序那些事儿》，懂技术，更懂你！
