Flutter开发之布局-4-container（18）

container 比较像iOS 的View 几乎有所有的布局属性

用来放置widget的容器，有padding、margin、位置、大小等参数。
具体有以下参数：
alignment ：对齐方式 Alignment
padding：内边距 EdgeInsets
margin：外边距 EdgeInsets
color：
decoration：
foregroundDecoration:
width: 包含padding
height:包含padding
constraints：BoxConstraints：
transform：
child：子view，可以为空，就是一个空view
下面对每一个参数进行详细的讲解，希望大家对container的属性有个全面的了

1、alignment：对齐方式 Alignment

下面先看下Alignment：
先上图：

也就是如上图的象限所示一样，左上角为（-1，-1），右下角为（1，1）

2、padding: 内边距 margin：外边距 这两个一起讲了，具体的用法取值如下：

1. EdgeInsets.fromLTRB(10,10,10,10) ，L表示左边距（left缩写），T表示上边距（top缩写），R表示右边距（right缩写），B表示底边距（bottom缩写），四个值可以分开写；

2. EdgeInsets.all（10），上下左右边距均为10；

3. EdgeInsets.only(left: 10, right: 5, top: 10, bottom: 10)，可分别指定4个方向的边距值，如果只需要上边距，可以写成EdgeInsets.only( top: 10)；

4. EdgeInsets.symmetric(vertical: 20, horizontal: 10) ，可以指定垂直和水平方向的边距，也可以单独指定垂直或者水平方向的边距。如只需要垂直方向的边距，可写成EdgeInsets.symmetric(vertical: 20)；

5. EdgeInsets.fromWindowPadding()，创建与给定窗口填充匹配的insets。具体的用法目前还不知道,第一个参数是给定的widget的windowpadding，第二个是屏幕的分辨率；

3、color：颜色

1. Colors.green

2. Color.fromARGB(100, 10, 100, 100)，A表示不透明度，值从0-255，RGB值也是从0-255；

3. Color.fromRGBO(100, 10, 10, 1)，O表示不透明度，值从0-1，RGB值是从0-255；

4. Color.alphaBlend(Color.fromRGBO(10, 10, 255, 0.1), Color.fromRGBO(100, 10, 255, 0.5)) ，这个是颜色的混合，

颜色会根据不透明度进行合并；
如果前者的不透明度为1，就只显示前者颜色，前者为0，颜色为后者，否则就是按照前后者的不透明度和颜色进行混合；

3、decoration：装饰的东东，具体的参数如下：

    this.color,// 颜色，如果这个颜色指定了，最外层的颜色就不能用了，否则会报错，二者不可兼容。
    this.image,// 背景图片
    this.border,// 边框
    this.borderRadius,// 边框圆角
    this.boxShadow,// 阴影
    this.gradient,// 渐变，在图片之下展示，如果指定了渐变色，color属性就没用了
    this.backgroundBlendMode, // 混合模式应用于框的[颜色]或[渐变]背景,如果没有颜色或者渐变色，这个属性就没有效果
    this.shape = BoxShape.rectangle,// 这个有两个值，一个是方形，一个是圆形（circle），
        BoxShape.rectangle和RoundedRectangleBorder是一样的，CircleBorder和BoxShape.circle是一样的效果
        但是Container的shape只能用BoxShape.rectangle、BoxShape.circle是这两种，
        而RoundedRectangleBorder、CircleBorder目前是用在Material上的，
        因为Container的shape是继承自 BoxBorder的，而Material的shape是继承自ShapeBorder，
        虽然BoxBorder也是继承ShapeBorder的

具体先看下图片吧，清晰明了：

3.1 shape 外观样式，BoxShape.circle圆形图案，BoxShape.rectangle方形图案；
3.2 borderRadius 边框半径，有以下几种写法：

new BorderRadius.all(Radius.circular(4)) // 四个圆角都是半径为4
new BorderRadius.circular(4), // 四个圆角都是半径为4,和上面的效果是一样的
new BorderRadius.horizontal( left: Radius.circular(10)), //左边的两个角的半径为10 
new BorderRadius.horizontal(left: Radius.circular(10), right: Radius.circular(4)),//左边的两个角半径为10，右侧两个角半径为4
new BorderRadius.vertical( top: Radius.circular(6)), //上边两个角半径为6
new BorderRadius.only(
                      topLeft: Radius.circular(10),
                      topRight: Radius.circular(4),
                      bottomLeft: Radius.circular(6),
                      bottomRight: Radius.circular(20)
                     ), //坐上角半径为10，右上角4，左下角为6，右下角为20

3.3 boxShadow 阴影，阴影是BoxShadow的数组：其中阴影有4个参数；

BoxShadow(
 color: Colors.green, //阴影的颜色
 offset: Offset(50, 100), //偏移量，Offset第一个参数为x轴的偏移量，正值向右，负值向左，第二个参数是y轴的偏移量，正值向下，负值向上
 blurRadius: 20, //这个是高斯模糊的半径，半径越大阴影越模糊，半径越小阴影越清晰
 spreadRadius: 10) //这个扩散的半径，半径越大阴影面积越大，值越小阴影面积越小

4、foregroundDecoration: 同上面的Decoration一样，只不过这个是在子chlild的前面绘制，Decoration是在子child的后面绘制的。

5、constraints：约束子child的

值有最大宽度、最小宽度、最大高度、最小高度

来源作者：liu_520
链接：https://www.jianshu.com/p/a675b4d66a93