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的单位是什么呢?如何保证不同的屏幕大小有一致的效果呢?
网友评论