flutter之Container

Posted 2021-04-29 青年码农

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("内容"),