一，前言
Flutter控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，例如，Container是一种常用的控件，由负责布局、绘画、定位和大小调整的几个控件组成，具体来说，Container是由LimitedBox、ConstrainedBox、 Align、Padding、DecoratedBox和Transform控件组成，而不是将Container子类化来产生自定义效果，您可以用这种新颖的方式组合这些以及其他简单的控件。
二，基本组件 -- Container
容器，一个常用的控件，由基本的绘制、位置和大小控件组成。负责创建矩形的可视元素，可以用BoxDecoration来设计样式，比如背景、边框和阴影，Container也有边距、填充和大小限制，另外，还可以在三维空间利用矩阵进行变换。
没有子控件的容器尽可能大，除非传入的大小约束是无限的，在这种情况下，它们尽可能小。有子控件的容器将自己的尺寸给他们的孩子。我们可以通过width、height和 constraints属性控制size。
- 继承关系
Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container
- 行为
由于Container结合了许多其他Widget，每个Widget都有自己的布局行为，因此Container的布局行为有点复杂。
依次是：
1.采用alignment2.以child调整自身大小3.采用了width，height和constraints4.扩大以适应父Widget5.要尽可能小
具体情况来说：
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传递给子级，自身调整大小。
-
构造方法讲解
Container({ Key key, this.alignment,//控制child的对齐方式 this.padding, //设置内边距 Color color, //设置背景颜色 Decoration decoration,//绘制在child下层的装饰，不能与color同时使用 this.foregroundDecoration,//绘制在child上层的装饰 double width, //宽 double height, //高 BoxConstraints constraints,添加到child上额外的约束条件 this.margin,//外边距 this.transform,//设置container的变换矩阵，类型为Matrix4 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)".'）/** const BoxDecoration({ this.color, this.image, this.border, this.borderRadius, this.boxShadow,//border四周添加阴影效果 this.gradient,//装饰器的过度效果，比如可以用来给组件添加一个蒙层 this.backgroundBlendMode, this.shape = BoxShape.rectangle, }) */ - 参数详解
-
alignment（这个属性是针对容器中的child的对其方式）
- topCenter：顶部居中对齐
- topLeft：顶部左对齐
- topRight：顶部右对齐
- center：水平垂直居中对齐
- centerLeft：垂直居中水平居左对齐
- centerRight：垂直居中水平居右对齐
- bottomCenter底部居中对齐
- bottomLeft：底部居左对齐
- bottomRight：底部居右对齐
-
-
- decoration（容器的修饰器，用于背景或者border）
如果在decoration中用了color，就把容器中设置的color去掉，不要重复设置color，设置的边框样式是让四条边框的宽度为8px，颜色为黑色
- decoration（容器的修饰器，用于背景或者border）
-
- margin（margin属性是表示Container与外部其他组件的距离）
- padding（指Container边缘与Child之间的距离）
padding: EdgeInsets.all(20.0),
- transform（可以根据自己的需要调整旋转的角度）
transform: Matrix4.rotationZ(0.2)
三，示例demo
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Container组件demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new CenterDemoPage() , ); }}class CenterDemoPage extends StatefulWidget{ @override createState() => new CenterDemoPageState();}class CenterDemoPageState extends State { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Container Widget Demo'), ), body:_buildDemo() , ); } Widget _buildDemo(){ return new Center( child: Container( child: new Text('Hello Wolrd !'), alignment: Alignment.center, //设置对齐方式 width: 300, //宽 height:300, //高 // color: Colors.redAccent, //设置边框 decoration: new BoxDecoration( gradient: new LinearGradient( begin: Alignment.topLeft, end: Alignment(0.8, 0), colors: [const Color(0xFFFFFFEE), const Color(0xFF999999)] ), color: Colors.blue, border: Border.all( color: Colors.black, width: 8.0, ), ), //内边距 padding: EdgeInsets.all(20.0), margin: EdgeInsets.all(10.0), //旋转 transform: Matrix4.rotationZ(0.4), ), ); }} 效果：
四，官网用法