Container构造函数

 Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  })

1.color颜色

其中color用来指定背景色

return Container(
        color: Colors.blue,
      );

以上代码将展示一个全蓝的界面

return Container(
        color: Colors.blue,
        child: Container(
          color: Colors.red,
        ),
      );

以上代码将展示一个全红的界面，红色子界面覆盖了蓝色界面

2.MARGIN边距

2.1EdgeInsets.fromLTRB

EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom)

表示左上右下4个边的间距

return Container(
        color: Colors.blue,
        margin: EdgeInsets.fromLTRB(0, 100, 0, 0),    
      );

展示结果如下

image.png

  return Container(
        color: Colors.blue,
        margin: EdgeInsets.fromLTRB(100, 100, 100, 100),

      );

如下

image.png

2.2.EdgeInsets.all

const EdgeInsets.all(double value)
      : left = value, top = value, right = value, bottom = value;

同时设置4个边的间距

return Container(
        color: Colors.blue,
        margin: EdgeInsets.fromLTRB(100, 100, 100, 100),
        child: Container(
          color: Colors.red,
          margin: EdgeInsets.all(20),
        ),
      );

效果如下

image.png

可见，子widget的margin是从父widget内部开始算的，而不是每次都从屏幕边缘开始，这点比较符合直觉，其中一个令人疑惑的地方就是，EdgeInsets.all的单位是什么呢？如何保证不同的屏幕大小有一致的效果呢？

屏幕适配