flutter之Container

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