Container类似于iOS中的UIView,具有绘制、定位、调整大小功能。通常用来装载其它子控件,假如Container没有子控件,它将自动填充整个屏幕;反之,会根据子控件大小,调整自身大小,从而达到自适应效果。
注意:使用Container时,通常要有一个父控件,一般情况下不单独使用Container。常用的父控件有Center widget、Padding Widget、Column Widget、Row Widget、Scaffold Widget。
构造函数
Container({ this.alignment, //设置子元素的对齐方式 this.padding, //容器内边距,属于decoration的装饰范围 Color color, // 背景色 Decoration decoration, // 背景装饰 Decoration foregroundDecoration, //前景装饰 double width,//容器的宽度 double height, //容器的高度 BoxConstraints constraints, //容器大小的限制条件 this.margin,//容器外补白,不属于decoration的装饰范围 this.transform, //变换 this.child,})
1.alignment设置子widget的在container中的对齐方式,其对齐方式有:
1.居中下对齐
alignment:Alignment.bottomCenter;
2.左下角对齐
alignment:Alignment.bottomLeft;
3.右下角对齐
alignment:Alignment.bottomRight;
4.居中对齐
alignment:Alignment.center;
5.居中左对齐
alignment:Alignment.centerLeft;
6.居中有对齐
alignment:Alignment.centerRight;
7.居中上对齐
alignment:Alignment.topCenter;
8.右上角对齐
alignment:Alignment.topRight;
9.左上角对齐
alignment:Alignment.topLeft;
2.padding:设置container的内边距
1.根据需求设置
padding: EdgeInsets.only(top: 10.0,bottom: 10.0,left: 10.0,right: 10.0)
这里的top,bottom,left,right可以根据自己需求设置,不一定每个都要设置,不设置的就是0.0。
2.转圈设置
padding:EdgeInsets.fromLTRB(20.0, 20.0, 30.0, 20.0)
LTRB分别代表left,top,right,bottom。
3.水平垂直方向设置
padding: EdgeInsets.symmetric(vertical: 20.0,horizontal: 10.0)
vertical代表垂直方向,horizontal代表水平方向.
3.margin:设置container的外边距,其值的设置方式和padding一样
1.根据需求设置
margin: EdgeInsets.only(top: 10.0,bottom: 10.0,left: 10.0,right: 10.0)
这里的top,bottom,left,right可以根据自己需求设置,不一定每个都要设置,不设置的就是0.0。
2.转圈设置
margin:EdgeInsets.fromLTRB(20.0, 20.0, 30.0, 20.0)
LTRB分别代表left,top,right,bottom。
3.水平垂直方向设置
margin: EdgeInsets.symmetric(vertical: 20.0,horizontal: 10.0)
vertical代表垂直方向,horizontal代表水平方向.
4.color:设置container的背景颜色
1.十六进制表示方法
color: Color(0xffFFFFFF)
这里的0x是固定的,ff代表颜色的透明度,后面的六位代表颜色的值
2.ARGB表示方法
color: Color.fromARGB(2, 29, 30, 10)
A透明度,取值范围是0~255;
R红色,取值范围是0~255;
G绿色,取值范围是0~255;
B蓝色,取值范围是0~255。
3.RGBO表示方法
color: Color.fromRGBO(20, 30, 100, .9)
R红色,取值范围是0~255;
G绿色,取值范围是0~255;
B蓝色,取值范围是0~255;
O透明度,取值范围是0~1;
5.width:container的宽,用double类型的数字表示
width: 250,
6.height:container的高,用double类型的数字表示
height: 250,
7.child:container的子widget
child: Text("内容"),