Flutter基础widgets教程-Container篇

1 Container

Container类似于iOS中的UIView，具有绘制、定位、调整大小功能。通常用来装载其它子控件，假如Container没有子控件，它将自动填充整个屏幕；反之，会根据子控件大小，调整自身大小，从而达到自适应效果。

注意: 使用Container时，通常要有一个父控件，一般情况下不单独使用Container。常用的父控件有Center widget、Padding Widget、Column Widget、Row Widget、Scaffold Widget。

2 构造函数

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

3 常用属性

3.1 alignment设置子widget的在container中的对齐方式

3.1.1 居中下对齐

alignment:Alignment.bottomCenter,

3.1.2 左下角对齐

alignment:Alignment.bottomLeft,

3.1.3 右下角对齐

alignment:Alignment.bottomRight,

3.1.4 居中对齐

alignment:Alignment.center,

3.1.5 居中左对齐

alignment:Alignment.centerLeft,

3.1.6 居中右对齐

alignment:Alignment.centerRight,

3.1.7 居中上对齐

alignment:Alignment.topCenter,

3.1.8 右上角对齐

alignment:Alignment.topRight,

3.1.9 左上角对齐

alignment:Alignment.topLeft,

3.2 padding:设置container的内边距

3.2.1 根据需求设置

padding: EdgeInsets.only(top: 10.0,bottom: 10.0,left: 10.0,right: 10.0)

这里的top，bottom，left，right可以根据自己需求设置，不一定每个都要设置，不设置的就是0.0。

3.2.2 转圈设置

padding:EdgeInsets.fromLTRB(20.0, 20.0, 30.0, 20.0)

LTRB分别代表left,top,right,bottom。

3.2.3 水平垂直方向设置

padding: EdgeInsets.symmetric(vertical: 20.0,horizontal: 10.0)

vertical代表垂直方向，horizontal代表水平方向。

3.3 margin:设置container的外边距

3.3.1 根据需求设置

margin: EdgeInsets.only(top: 10.0,bottom: 10.0,left: 10.0,right: 10.0)

这里的top，bottom，left，right可以根据自己需求设置，不一定每个都要设置，不设置的就是0.0。

3.3.2 转圈设置

margin:EdgeInsets.fromLTRB(20.0, 20.0, 30.0, 20.0)

LTRB分别代表left,top,right,bottom。

3.3.3 水平垂直方向设置

margin: EdgeInsets.symmetric(vertical: 20.0,horizontal: 10.0)

vertical代表垂直方向，horizontal代表水平方向。

3.4 color:设置container的背景颜色

3.4.1 十六进制表示方法

color: Color(0xffFFFFFF)

这里的0x是固定的，ff代表颜色的透明度，后面的六位代表颜色的值。

3.4.2 ARGB表示方法

color: Color.fromARGB(2, 29, 30, 10)

A透明度，取值范围是0～255；

R红色，取值范围是0～255；

G绿色，取值范围是0～255；

B蓝色，取值范围是0～255；

3.4.3 RGBO表示方法

color: Color.fromRGBO(20, 30, 100, .9)

R红色，取值范围是0～255；

G绿色，取值范围是0～255；

B蓝色，取值范围是0～255；

O透明度，取值范围是0～1；

3.5 width：container的宽

width: 250,

3.6 height：container的高

height: 250,

3.7 child：container的子widget

child: Text("内容"),